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>

JavaScript innerHTML只能在循环结束时使用

1 个答案: