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

});

Answer 2

如果要在计算发生时显示对话框，请在显示对话框后使用 setTimeout 调用长计算。如果要显示进度条，则必须在处理过程中的方便点使用一系列 setTimeout 调用。当一个结束时，它会更新进度条并调用下一个进度条，直到一切都完成。

但是，当任何特定脚本运行时，UI将被阻止。

Answer 3

我找到了这个教程，并根据我的需要进行了调整

http://www.ultramegatech.com/blog/2010/10/create-an-upload-progress-bar-with-php-and-jquery/

它似乎对我有用

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

3 个答案: