Javascript не печатает текст сразу

Я написал этот код, который должен сказать "привет", когда я нажимаю кнопку "привет":

<!DOCTYPE html>

<html>

<head>
<script>
var someLargeNumber = 5000000000;
function hello() {
    document.getElementById('hi').innerHTML = "hi";
    for(var i = 0; i < someLargeNumber; i++) {}
}
</script>
</head>

<body>
<p id="hi"></p>
<input type="button" value="hello" onclick="hello();">
</body>

</html>

Он говорит привет, но только после завершения цикла for. Почему это происходит и как я могу это исправить?

Спасибо

Ответ 1

Почему это происходит...

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

... и как я могу это исправить?

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

var someLargeNumber = 5000000000;
function hello() {
    document.getElementById('hi').innerHTML = "hi";
    setTimeout(function() {
        for(var i = 0; i < someLargeNumber; i++) {}
    }, 0);
}

Механизм JavaScript работает в основном в цикле с очередью задач (спецификация называет их "заданиями" ). Он забирает задание из очереди, запускает его до завершения и затем ищет следующую работу. Браузеры (обычно) обновляют пользовательский интерфейс, когда двигатель находится между заданиями. Когда происходит событие, задание помещается в очередь для вызова обработчика события. Вышеприведенное просто перемещает цикл в новое задание, он ставит очередь через setTimeout, поэтому браузер имеет возможность после задания события и перед заданием setTimeout обновлять пользовательский интерфейс.

Ответ 2

Как уже было сказано, браузер имеет один поток пользовательского интерфейса.

Другой вариант - использовать Web Worker (если вы не выполняете никаких манипуляций с DOM в рабочем потоке), что позволяет запускать операции в другом потоке.

Добавьте еще один файл js (скажем, worker.js)

var someLargeNumber = 5000000000;
onmessage = function(e) {
  console.log('Message received from main script');
  for(var i = 0; i < someLargeNumber; i++) {}
  console.log('Posting message back to main script');
  postMessage('done');
}

Вернуться в основной файл

<head>
<script>
var myWorker = new Worker("worker.js");
function hello() {
    document.getElementById('hi').innerHTML = "hi";
    myWorker.postMessage('test');
    console.log('Message posted to worker');
}
myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Worker thread is complete');
}
</script>