Question

有没有一种方法可以强制浏览器显示每次迭代的真实过程，如以下代码所示：

document.getElementById("dd").innerHTML = "new HTML"
for (let i = 0; i < 334339; i++) {
  document.getElementById("dd").innerHTML = "new HTML" + i;
  document.getElementById("dd").width=40;
}

<div id="dd">
  xxxxxxx
</div>
<div id="ss">
  <input type="button"></input>
</div>

Answer 1

您可以使用setInterval来实现。 setInterval的第一个参数是要调用的函数（运行每个循环的代码），第二个参数是您希望该函数被调用的频率（以毫秒为单位）

请参见以下示例：

document.getElementById("dd").innerHTML = "new HTML"

let i = 0;
let loop = setInterval(function() {
  if(i >= 15) { // change to something smaller to see it stop
    clearInterval(loop);
  }
  document.getElementById("dd").innerHTML = "new HTML" + i;
  document.getElementById("dd").width=40;
  
  i++;
}, 100) // call the setInterval function every 100m/s

<div id="dd"></div>

如果您最终希望停止循环，则可以使用clearInterval()来阻止回调连续运行

Answer 2

我相信setInterval是您案件的最佳选择。

document.getElementById("dd").innerHTML = "new HTML"

let i = 0;
let stop = 334339;
let time_millis = 200;

let int = setInterval(function() {
  document.getElementById("dd").innerHTML = "new HTML" + i;
  document.getElementById("dd").width=40;
  i++;
  if (i == stop) clearInterval(int);
}, time_millis);

<div id="dd">
  xxxxxxx
</div>
<div id="ss">
  <input type="button"></input>
</div>

如何在较长的过程中强制浏览器刷新视图

2 个答案: