1

我正在尝试更改h3标签中的文本，但在函数结束之前不会发生更改。我想立即更改文本。

例如：

<h3 id="myText"></h3>
<input type="button" onClick="changeText('Hello');">

<script type="text/javascript">
   function changeText(str){
      document.getElementById('myText').innerHTML = str;
   }
</script>

更改文本后是否可以立即刷新屏幕？（就像flush()C 中的命令）。

请注意，如果我alert在命令后面加上一个，文本会立即更改：

function changeText(str){
    document.getElementById('myText').innerHTML = str;
    alert('HelloWorld');
}
4

2 回答 2

2

要强制立即刷新，您可以这样做：

document.getElementById('myText').innerHTML = str; // change the dom
setTimeout(function(){
   // do other things
}, 0);

代码将do other things在刷新后执行。

但是让脚本持续运行几秒钟是非常不寻常的。

于 2013-01-23T12:32:18.903 回答
0

如果您正在谈论刷新所有页面，您将丢失在客户端更改的内容，因为它是无状态的（在请求之间）。如果您将其保存在服务器端的存储库（会话、应用程序、您可以读写的文件、数据库等）上，您可以从服务器端读取并将其保存在您的 html 元素中。

在 Javascript 中，您可以实现一个字典（键上的元素 id 和值上的 innerHTML）并将其用作缓存并实现一个刷新方法来显示所有更改，尝试类似：

<script>

var cacheChanges = {};

function addChange(element, value){
   cacheChanges[element] = value; 
}

function flush() {
  for(var i in cacheChanges)
  {
    var element = document.getElementById(i);
    if (element) {
      element.innerHTML = cacheChanges[i];
    }
  }
}


function ChangeSomething(){
  // do some changes
  addChange('myText', 'Hello');
  addChange('myText2', 'Hello 2');
  addChange('myText3', 'Hello 3');

  // apply all them
  flush();
}

</script>

在你的 html 中：

  <h3 id="myText"></h3>
  <h3 id="myText2"></h3>
  <h3 id="myText3"></h3>

  <input type="button" onClick="ChangeSomething();">
于 2013-01-23T12:39:25.933 回答