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

У меня есть одно место в веб-приложении, где я делаю много вычислений в 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>

Script:

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

});

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

Ответы

Ответ 1

Завершите длительные вычисления внутри setTimeout:

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

После setTimeout не должно быть больше script.

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

});

Ответ 2

Если вы хотите показать диалог во время выполнения вычислений, используйте setTimeout для вызова длинных вычислений после отображения диалога. Если вы хотите показать индикатор выполнения, вам придется использовать последовательность вызовов setTimeout в удобных точках во время обработки. Когда он заканчивается, он обновляет индикатор выполнения и вызывает следующий, пока все не сделано.

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