javascript - 无法在 setTimeout 内设置 innerHTML

Question

试图设置一个 HTML 类的 innerHTML，它是四个框，每个框依次设置 ​​3 秒。当 innerHTML 设置为加载图标时，我可以在没有 setTimeout 的情况下设置 innerHTML。当将 innerHTML 放入 setTimeout 中时，将返回以下内容:'Uncaught TypeError: Cannot set property 'innerHTML' of undefined'。

尝试调试我的代码，向控制台发送消息并搜索 stackoverflow，但没有成功。

var x = document.getElementsByClassName("numberBox");


for (var i = 0; i < 4; i++) {
    x[i].innerHTML= '';
    x[i].innerHTML= "<div class='loader'></div>"
}

// function to generate array of 4 random numbers
var randomNums = generateRandomNumbers();


for (var i = 0; i < 4; i++) {
    setTimeout(function () {
        x[i].innerHTML= '';
        x[i].innerHTML = randomNums[i];
    }, 3000 * i);
}

想知道为什么我的 innerHTML 不能设置在 setTimeout 内，以及我的问题的可能解决方案。

Answer 1

我认为这是当前范围的问题。 setTimeout 函数创建了它自己的作用域，它没有引用旧变量。您可能需要重新定义超时内的 x 或将数组显式传递给超时。

请参阅此处了解操作方法:How can I pass a parameter to a setTimeout() callback?

我还建议您也阅读闭门器:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures