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

我在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 });

});

单击按钮时，应立即显示此信息。

脚本：

<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 });

});

$（函数（）{
$（“#开始工作”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
//做一些冗长的计算
对于（var i=0；i将冗长的计算包装在
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 });

});

$（函数（）{
$（“#开始工作”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
setTimeout（函数（）{
//一些长度计算
对于（var i=0；i如果要在计算进行时显示对话框，请在显示对话框后使用setTimeout调用长计算。如果要显示进度条，则必须在处理过程中的方便时间点使用一系列setTimeout调用。当一个进程结束时，它会更新进度条并调用下一个进程直到一切都完成

但是，当任何特定脚本正在运行时，UI都将被阻止。
谢谢。我建立了一个工作任务队列，并使用setTimeout按顺序启动队列中的每个项目。效果很好。@ExceptionSlayer超时将工作项列在队列中。如果有任何内容在超时之前排队运行，则该项目（通常）首先执行-包括绘制UI。这是一个关于超时的好教程：。