如何在漫长的javascript计算过程中强制在浏览器中进行UI更新？

Question

我在Web应用程序中有一个位置,我在浏览器中使用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 });

});