javascript - 当整个UI显示时如何开始计算

Question

考虑最简单的情况——显示进度条，开始计算，关闭进度条。

有了这样的html片段:

<p id="hello" style="display:none">HELLO WORLD</p>  

令我惊讶的是，这不起作用:

function foo()
{
    var hello = $('#hello');
    hello.html(new Date().getTime());
    hello.show();
    setTimeout(function(){
        var big = 0;
        for (var i=0;i<10000000;++i)
            if (Math.sqrt(i)>Math.cos(i)) // just to keep CPU busy
                big = i;
        console.log(i);
    },0);

}

$(window).load(function () 
{
    foo();
});

使用 jQuery promise 也没有帮助:

hello.show().promise().done(function(){...

在这两种情况下，元素都会在控制台中显示输出的同时(以视觉方式)显示。

我以视觉方式进行编写，因为在内部可以将元素报告为已显示的内容，但用户看到的内容很重要。

Answer 1

您可以将计算代码放在单独的 javascript 函数中，即使它是线性的，它也不会等待 javascript 中的计算完成并立即移至下一行。我在隐藏进度条之前等待了一段时间，因为您需要让它至少可用一秒钟。

function startComputing(){
        var big = 0;
        for (var i=0;i<10000000;++i)
            if (Math.sqrt(i)>Math.cos(i)) // just to keep CPU busy
                big = i;
        console.log(i);
}

function foo()
{
    var hello = $('#hello');
    hello.html(new Date().getTime());
    hello.show();
    setTimeout(function(){startComputing();},500);
    setTimeout(function(){hello.hide()},1000);

}