При связывании с jQuery изменения DOM не отражаются в реальном времени

Question

Мне трудно понять, почему я не могу обновить DOM, пока jQuery выполняет код. Это не мой настоящий сценарий, но я думаю, что он иллюстрирует проблему, с которой я столкнулся.

У меня есть кнопка btnSubmit. Когда пользователь щелкает по нему, я хочу отобразить элемент div, который сообщает пользователю, что происходит некоторая обработка. Вот код:

$("#btnSubmit").bind("click",
    function () {
        $('#divProcessing').addClass('showProcessing');
        <processing goes here>
        debugger;
    });

Для обработки может потребоваться или не потребоваться вызов AJAX.

Вот мое недоразумение: если я позволю моему скрипту нарушить оператор отладчика, страница в браузере не обновится. Он не обновляется, пока не завершится выполнение сценария.

Я видел много примеров того, как это сделать (используя .ajaxStart и т. Д.), Однако ни один из них не работает для меня. Любые предложения будут с благодарностью!

Answer 1

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

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

Помещая оператор debugger; в функцию щелчка, вы никогда не даете окну браузера возможность выполнить обновление до остановки выполнения в отладчике.

Вы можете поместить оператор alert(); непосредственно перед оператором debugger;. При открытии окна предупреждения выполнение JavaScript останавливается, и выполнение передается обратно в браузер до тех пор, пока предупреждение не будет закрыто.

UPDATE: Firefox и Chrome обновят страницу, когда выполнение будет остановлено для отладчика. Internet Explorer не будет.

Answer 2

Я создал следующий файл в http://jsfiddle.net/ggYZM/4/

$("#btnSubmit").bind("click", function() {
    console.log("running");
    $('#mydiv').addClass('showProcessing');
    alert("here"); // blocks the browser
    setTimeout(doneProcessing, 5000);

});

function doneProcessing() {
    $('#mydiv').removeClass('showProcessing');
    console.log('finished');
}

<div id="mydiv"></div>
<input type="button" id="btnSubmit" value="Click Me!" />

#mydiv {
    border: 1px solid black;
    width: 200px;
    height:200px;
}

.showProcessing {
    background-color:blue;
}

Он работает точно так, как и ожидалось - класс добавляется немедленно, а изменение ясно видно за окном предупреждения ... что-то еще должно быть не такс вашей реализацией ... возможно CSS не правильный?

Answer 3

Попробуйте .show (). Или просто сделайте div диалогом и используйте $ ("# divid"). Dialog ("open");