javascript - 如何在进行冗长的 JavaScript 计算时强制更新浏览器中的 UI？

Question

我在网络应用程序中有一个位置，在浏览器中使用 JavaScript 进行大量计算。。它们可能需要不到一秒到大约一分钟的时间来运行，我想在此步骤中显示一个进度对话框，但该对话框直到我的计算完成后才会显示。我首先尝试显示一个 jquery 对话框:

HTML:

<input type="button" id="startwork" value="Start working">

<div id="dialog" title="My dialog">
    This should show up immediately on clicking the button.
</div>

脚本:

$(function() {

    $("#startwork").click(function () {
        $("#dialog").dialog("open");
        // Do some lengthy calculations
        for (var i=0; i<1000000000; i++) {
            var foo = Math.random();   
        }
        $("#dialog").dialog("close");
        alert("done");
    });

    $("#dialog").dialog({ autoOpen: false });

});

如何强制 UI 在计算开始之前以及计算过程中按照定义的时间间隔进行更新？

Answer 1

将冗长的计算封装在 setTimeout 中:

setTimeout(function() {
// some length calculations
}, 0);

setTimeout 之后不应再有任何脚本。

$(function() {

    $("#startwork").click(function () {
        $("#dialog").dialog("open");
        setTimeout(function() {
            // some length calculations
            for (var i=0; i<1000000000; i++) {
                var foo = Math.random();   
            }
            $("#dialog").dialog("close");
            alert("done");
        }, 0);
    });

    $("#dialog").dialog({ autoOpen: false });

});