Страница не обновляется во время занятого кода JavaScript

Question

У меня довольно длинный JavaScript-скрипт. Проблема в том, что в середине я хочу изменить innerHtml div на «почти готово, пожалуйста, подождите». Я думаю, проблема в том, что я вызываю функцию jquery. В случае успешного завершения функции, которую я вызываю, я вызываю другую функцию, с которой я пытаюсь обновить страницу.

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

Кто-нибудь видел что-то подобное раньше?

Спасибо!

Answer 1

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

doStuff();
$('#myDiv').html('Almost done, please wait');
setTimeout(doMoreStuff, 50);

Обратите внимание, что doMoreStuff - это еще одна функция, которая будет выполнять последнюю часть вашей обработки.

Если ваш код может быть разделен таким образом, это позволит браузеру войти в некоторые циклы рендеринга. Возможно, вы захотите поэкспериментировать с задержкой (50 выше), чтобы найти число, которое работает для вас, но если все, что вы хотите сделать, это установить содержимое div, тогда 50 должно быть в порядке (возможно, даже 0 будет работать). *

Кроме того, я не могу вспомнить синтаксис jQuery для установки innerHTML, но я думаю, что дело дошло:)