JavaScript innerHTML будет работать только в конце цикла

Question

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

У меня, однако, проблемы с тем, чтобы заставить innerHTML работать как положено.

код, который я использую

function test() {
    var testArray = [3, 4, 5, 6, 7, 8];
    for (var i = 0; i < testArray.length; i++) {
        container.innerHTML = testArray[i];
        sleep(50);
    }
}
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Всякий раз, когда я запускаю функцию test(), она не будет циклически перебирать массив и отображать только последний номер массива на странице HTML.

Я пытался использовать функцию setTimeout, и получил те же результаты, я также пытался установить время задержки выше.

Answer 1

Вы должны использовать setInterval, чтобы дать браузеру возможность обновить окно.

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

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

var container = document.getElementById('container');

test();

function test() {
    var testArray = [3, 4, 5, 6, 7, 8];
    
    var i = 0;
    var interval = setInterval(function () {
        if (i >= testArray.length - 1) {
            clearInterval(interval);
        }
    
        container.innerHTML = testArray[i];
        
        i++;
    }, 50);
}

<div id="container"></div>