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 是单线程的。并且对于大多数浏览器来说，这个线程还用于更新 UI。因此，在脚本完全完成之前，您的窗口不会更新。

使用 setInterval 将函数推送到队列中，以便稍后在运行的脚本完成并且 UI 有时间更新后执行。

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>