Question

我正在尝试更改h3标记中的文本，但是在功能结束之前不会发生更改。我想立即更改文本。

例如：

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

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

更改文字后是否可以立即刷新屏幕？（与C中的flush()命令相同。

请注意，如果我在命令后放置alert，则会立即更改文本：

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

Answer 1

要强制立即刷新，您可以执行以下操作：

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

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

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

Answer 2

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

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

<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();">

javascript刷新文本

2 个答案: