时间戳

首页 > 解决方案 > innerHTML 未在 for JS 循环中更新

javascript - innerHTML 未在 for JS 循环中更新

问题描述

我有一些 JS 函数本质上应该每 5 秒在网页上显示一个数字。实际上，发生的情况是屏幕上显示了一个数字，但在 5 秒后（或者实际上）没有更新；它只是永远呆在那里。奇怪的是，如果我添加调试点（通过 Chrome 开发人员工具），循环会正常工作，并且屏幕上的数字会按预期更新。

循环执行似乎存在问题，因为它应该在常规模式下（即不在调试模式下）。

作为参考，我在 Safari 和 Chrome 中都进行了测试，问题是一样的。

function displayNumbers(){
    document.getElementById("instructions").innerHTML = "";
    document.getElementById("welcome-message").innerHTML = "";

    var numbersCalled = [];
    for (var j=0; j< 90; j++){
        var numberToDisplay = Math.floor(Math.random() * 91) + 1; 
        if (!numbersCalled.includes(numberToDisplay)){
            setTimeout(printNumberToScreen(numberToDisplay), 5000); 
            numbersCalled.push(numberToDisplay);                  
        }
    }
}

function printNumberToScreen(numberToDisplay){
    document.getElementById("number-display").innerHTML = numberToDisplay;
}

'number-display' 被初始化为：

<h2 id="number-display"></h2>

标签： javascripthtmlsettimeoutsetinterval

解决方案

您以错误的方式使用 setTimeout setTimeout 接受回调/匿名函数作为第一个值但是您传递了一个由printNumberToScreen.

你应该像这样传递函数 setTimeout(printNumberToScreen, 3000)

如果您想将参数传递给printNumberToScreen 然后将匿名函数传递给setTimeout

例如 setTimeout (() => printNumberToScreen(5), 4000)

推荐阅读