Рендеринг текста с использованием JavaScript в цикле - браузер перестает отвечать на запросы

Question

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

Вероятно, существуют известные приемы, чтобы заставить вещь итеративно обновляться, а не зависать на выходе, а затем сбрасывать, проблема в том, что я их не знаю!

Любая помощь приветствуется.

ОБНОВЛЕНИЕ : я изменил свой код, чтобы использовать setTimeout, как некоторые из вас предложили, но я боюсь, что это не помогает. Я все еще ничего не увижу, пока обработка не будет завершена. Я также попытался увеличить время ожидания, но эффект все тот же (увеличение времени ожидания между каждой итерацией, очевидно, занимает больше времени, но браузер по-прежнему не отвечает). Есть идеи?

Answer 1

setTimeout (), setInterval () - лучший способ реализовать функцию ожидания / паузы в javascript.Вот пример программы для отображения 10 числа с интервалом времени 100 миллисекунд между каждым.

<button id="startProgram" onclick="startProgram()">Start</button>
<div id="content"></div>
<script type="text/javascript"> 
function startProgram() {
var content = document.getElementById("content");
var string = "";
for(var i = 0; i < 10; i++) {
    string = string + i + "<br/>";
    setTimeout('display("' + string + '")', 100 * i);
}
}
function display(string) {
  content.innerHTML = string;
}
</script> 

Вставьте этот код в пустой HTML-файл, чтобы проверить его.

Answer 2

Звучит как ожидаемое поведение. JavaScript, вероятно, работает быстрее, чем браузер может отобразить его вывод.

Похоже, вы хотите показать список действий? Возможно, вы могли бы разместить их всех на странице с помощью display: none и переключить их на display: block, возможно, будет быстрее.

В качестве альтернативы, если вам не нужна абсолютная точность, поиграйте с setTimeout().

Answer 3

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

var i = 0;

function count() {
  i++;
  document.getElementsById("log").innerHTML += i + "<br />";
  setTimeout(count, 1000);
}

count();

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

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

Answer 4

Если вам требуется поддержка только самых современных браузеров, используйте Web Workers.