Question

我有一个长期运行的Javascript函数，如下所示：

window.myFunction = function() {
    for(var i=0;i<500;i++){
        // calling a function here
        document.getElementbyID('mySpan').innerHTML = "Completed step " + i + "/500"
    }
}

我的函数经常调用另一个同步函数（在这个例子中我使用了500），当用户等待任务完成时，我想实现类似加载栏的东西，但我通过更新跨度来演示它我的情况在这里。每次更新我的跨度时，是否可以强制进行某种类型的DOM刷新？

Answer 1

您应该使用setTimeout方法在event queue上运行它，而不是在stack上运行它。因为在没有for的情况下运行，所以您不会在delay循环内看到更新。在繁重的任务之后我添加了callback来运行它。

//Heavy task function
var heavyTask = function(i, callback) {
  setTimeout(function() {
    document.getElementById('mySpan').innerHTML = "Completed step " + i + "/500";

    //Callback to the caller saying the task is finished here and continue on
    /////////////////////
    callback();

  }, 50);
}


var i = 0;

//Call myFunction recursively.
(window.myFunction = function() {
  if (i < 500) {
    heavyTask(i, function() {
      i++;
      window.myFunction();
    });
  }
})();

<span id="mySpan"></span>

Answer 2

由于脚本在浏览器的单个线程中运行，因此在更新DOM之前，需要完成像您这样的任何方法。但是，您可以使用具有较小延迟的迭代函数，允许浏览器重绘。

这是一个例子......

＆＃13;

window.myFunction = function(i) {
    // calling a function here - passing i as a parameter, if needed
    document.getElementById('mySpan').innerHTML = "Completed step " + i + "/500";
    i++;
    if (i <= 500) setTimeout(function() { myFunction(i) }, 1);
}

myFunction(0);

＆＃13;

<span id="mySpan"></span>

＆＃13;

在Javascript函数执行期间更新DOM

2 个答案: