Question

假设我有这个客户端代码：

var d=document.createElement('div');
d.style.position='absolute';
d.style.width='1em';
d.style.height='1em';
d.style.background='red';
document.body.appendChild(d);
for(var i=1e7;i;--i);

它会创建一个红色方块并在循环中倒计时。现在我必须等到倒计时才能看到红色方块。在倒计时开始之前展示广场的最佳方式是什么？我想在超时后执行倒计时：

setTimeout(function(){
    for(var i=1e7;i;--i);
},1);

还是有更好的方法吗？我不想将我的代码重建为WebWorkers。在开始使用线性代码之前，只有一种简单的方法来显示消息。

我的真实生活情况是我有一个庞大的计算，需要一些时间，我想在它开始之前显示一条消息。

Answer 1

如果这是一个很大的计算，它可能会锁定您的浏览器，导致您的用户体验非常糟糕。如果是这种情况，您可以考虑在网络工作者中进行计算并将完成的消息发回给用户。

http://www.html5rocks.com/en/tutorials/workers/basics/

更简单地说，您使用setTimetout或setInterval执行某些操作，并且默认情况下只显示消息：http://jsfiddle.net/ZHDY4/1/

我们等待DOM准备就绪，显示带有相应等待消息的红色框。

$(document).ready(function() {
    var n = 99;
    $("#counter").html("Please Wait"); 

    // Some long calculation; the red box is showing
    var a = 0;
    for(var i = 0; i < 99999; ++i) {
        for(var j = 0; j < 9999; j++) {
            a++;
        }
    }

    var counter = setInterval(function() {
        $("#counter").html(n);
        n--;

        if(n <= 0) {
            clearInterval(counter);
        }

    }, 1000);
});

如何让浏览器画画？

1 个答案: