Как заставить обновления пользовательского интерфейса в браузере во время продолжительных вычислений JavaScript?

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

});

Что я могу сделать, чтобы пользовательский интерфейс обновлялся до начала вычислений и через определенные промежутки времени во время вычислений?

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 в удобных точках во время обработки. Когда он заканчивается, он обновляет индикатор выполнения и вызывает следующий, пока все не будет сделано.

Однако, пока выполняется какой-либо конкретный скрипт, пользовательский интерфейс будет заблокирован.

Answer 3

Я нашел этот учебник и адаптировал его под свои нужды

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

Кажется, у меня работает