javascript - 在 javascript 执行期间强制 Chrome 刷新显示

Question

我必须创建一个 jQuery Dynatree。使用我的 JavaScript，我构建了这个 Dynatree 的不同节点。JavaScript 执行需要一定的时间。

在 Firefox 中，我得到了我想要的结果，即我看到我的 Dynatree 在增长，但在 Chrome 中，我必须等到 JavaScript 执行结束才能看到最终结果。在此之前，我只有一个空白页。

那么你知道在 JavaScript 执行期间强制 Chrome 刷新显示的方法吗？

Answer 1

我假设您正在使用循环来生成树，因此创建一个函数，该函数根据传递的变量运行树生长的单个步骤，该变量将是您在循环中的计数器。艾：

<script>

//  what you probably have now
//  for(var i=0;i<100;i++){
//      dosomething
//  };


function step(i){
    dosomething
    if(i<100){
        window.requestAnimationFrame(function(){step(i+1)});
    };
};
step(0);

</script>

您将不得不requestAnimationFrame像这样制作跨浏览器。

window.requestAnimationFrame=(function(){
    return window.requestAnimationFrame     ||
        window.webkitRequestAnimationFrame  ||
        window.mozRequestAnimationFrame     ||
        window.oRequestAnimationFrame       ||
        window.msRequestAnimationFrame      ||
    function(callback){
        window.setTimeout(callback,1000/45);
    };
})();

但这应该可以在每次程序运行后重新渲染 DOM。