javascript刷新文本

我正在尝试更改

h3

标记中的文本，但是直到函数结束，更改才会发生。我想马上修改课文

例如：

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

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

---

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

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

刷新后将执行

执行其他操作

代码

---

但是，让脚本持续运行几秒钟是非常罕见的。

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

在Javascript中，您可以实现一个字典（键上的元素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>

var cacheChanges={}；
函数addChange（元素、值）{
cacheChanges[元素]=值；
}
函数flush（）{
for（缓存更改中的变量i）
{
var元素=document.getElementById（i）；
if（元素）{
element.innerHTML=cacheChanges[i]；
}
}
}
函数ChangeSomething（）{
//做些改变
addChange（'myText'，'Hello'）；
addChange（'myText2'，'Hello 2'）；
addChange（'myText3'，'hello3'）；
//全部应用
冲洗（）；
}

在您的html中：

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

  <input type="button" onClick="ChangeSomething();">

请问在何种情况下文本不会立即更改？如果我正确理解了您的问题，则您希望绑定到

鼠标向下

事件，而不是

单击

。您在函数中还做了什么？这是否很耗时？在函数（以及任何函数调用链）完成之前，浏览器不会重新绘制。但是您可以按照dystroy的回答，使用

setTimeout（）

解决这个问题。（一个

alert（）

是这个规则的一个例外，因为

alert（）

是一个阻塞调用，所以浏览器有时间重新绘制。）我很确定当OP说“刷新屏幕”时，他们只是想强制浏览器重新绘制，而不是从服务器刷新页面。缓存和刷新方法无法解决此问题，因为调用

flush（）

后的任何代码在浏览器重新绘制之前仍将运行。

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

  <input type="button" onClick="ChangeSomething();">