Javascript, использующий для цикла, чтобы спать поток кода

Question

Попытка перевести поток кода таким образом (вместо setTimeOut) для эксперимента

var div = document.getElementById("algo-code");

div.innerHTML += "<p>Extra stuff1</p>";

// works like sleep in php
for (var i = 0; i < 1000000; i++) {
}

div.innerHTML += "<p>Extra stuff2</p>";

Он добавляет два абзаца к div одновременно, но когда я помещаю console.log вместо div.innerHTML, он работает синхронно, спит некоторое время перед печатью второй консоли.

Что происходит на самом деле?

Answer 1

Мое лучшее предположение относительно того, почему в консоли работает «лучше» или «как вы ожидаете», заключается в том, что оптимизатор не столь агрессивен на консоли js, но признает, что ваши блоки for() ничего не делают, и игнорирует ихкогда не в консоли.Кроме того, петли могут быть настолько плотными, что рисование не происходит.

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

setTimeout(function(){
  var div = document.getElementById("algo-code");
  div.innerHTML += "<p>Extra stuff1</p>";
  
  setTimeout(function(){ div.innerHTML += "<p>Extra stuff2</p>";}, 1000);
}, 1000);

<div id="algo-code">......</div>