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

Question

Я использую свойство innerHTML для динамического изменения DIV, чтобы сообщить о процессе, для завершения которого требуется несколько секунд. Проблема заключается в том, что в Firefox страница фактически не перерисовывается, чтобы отразить это изменение, до тех пор, пока сценарий не будет завершен. Это заставляет приложение чувствовать себя вялым. Есть ли способ сделать так, чтобы изменения в HTML отображались немедленно, даже если запущено больше скриптов?

Answer 1

Браузер однопоточный. Пока скрипт запущен, браузер больше ничего не может сделать. Если вы хотите сделать что-то вроде индикатора прогресса, вы должны использовать setTimeout() или setInterval() и разбивать вашу задачу на более мелкие куски, которые запускаются с интервалом , Это оставляет промежутки между запусками скрипта, возвращая контроль браузеру, где браузер может перерисовать.

Answer 2

Попробуйте периодически прерывать ваш скрипт. Вы должны быть в состоянии использовать

setTimeout(nextFunction, 0); 

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