Как обновить элемент страницы во время длинного события?

Question

У меня есть метод длительного запуска - и я хочу указать пользователю, что операция выполняется. Это НЕ вызов ajax, поэтому я не могу использовать общий шаблон, который я использовал в прошлом, чтобы отобразить, скажем, спиннер, перед событием ajax, а затем, например, скрыть его при успехе.

В моем случае - я не делаю ajax-вызов, вместо этого я выполняю очень тяжелые манипуляции с DOM.

У меня был тестовый пример на jsFiddle.net - хотелось бы узнать, как захватить событие. В данный момент мой div "wait-message" обновляется в то же самое время, когда моя операция завершается, что слишком поздно: (

Полный пример кода здесь: http://jsfiddle.net/rsturim/97hrs/6/

Javascript (jQuery)

$(document).ready(function() {

    $("#link-action").click(function(e) {

        $("#wait-message").text("starting ...");

        var count = longRunningMethod(1000000000);

        $("#result").text(count);
        $("#wait-message").text("completed.");

    });


    var longRunningMethod = function(countUpTo) {
        var i = 0;
        while (i <= countUpTo) {

            i++;
        }

        return i;

    };
});

HTML:

<div id="wait-message">
    push button please 
</div>   
<hr />

<button id="link-action">Run Operation</button>

<hr />

<h1>Results:</h1>
<div id="result"> </div>   

Answer 1

Вот решение.Я не уверен, работает ли он во всех браузерах, вы можете протестировать его в нескольких, но я думаю, что это так:

$(document).ready(function() {

    $("#link-action").click(function(e) {

        $("#wait-message").text("starting ...");

        // Stuff to do after a render
        setTimeout(function(){
            var count = longRunningMethod(1000000000);

            $("#result").text(count);
            $("#wait-message").text("completed.");
        }, 0);
    });


    var longRunningMethod = function(countUpTo) {
        var i = 0;
        while (i <= countUpTo) {

            i++;
        }

        return i;

    };
});

По сути, браузер не будет отображать какие-либо изменения, пока скриптзаканчивает выполнениеЭто позволяет вам делать такие вещи, как:

• Скрыть все div с определенным классом
• Показать один из этих div

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

Используя setTimeout, как я, анонимный обработчик кликов завершит работу, браузербудет выполнен повторный рендеринг, будет запущена анонимная функция в setTimeout (сразу после рендеринга, так как нет фактической задержки).

Answer 2

Используйте setTimeout или setInterval вместо цикла while;для предотвращения зависания окна / блокировки пользовательского интерфейса должно быть достаточно субсекундной задержки, например 15 мс.