"setInterval" 中 "for" 的索引

Question

我有一个对象，我把它放在一个数组中，然后我用 for 迭代数组，对于数组中的每个对象，我设置了一个调用对象方法的间隔参数，但我不能。这是我的 "Class".

    function ClassTest() {
        this.test = function(word) {
            console.log(word);
        }
    }

我创建对象并将其放在数组中：

    var array = [];
    var objectTest = new ClassTest();


    array.push(objectTest);

当我设置间隔时：

    for(var i = 0; i < array.length; i++) {
        array[i].loop = setInterval(function() {
            array[i].test("hello")
        }, 1000);
    }

问题是 setInterval 函数中的 var i 不存在，我可以创建一个 var index 并且它存在但我不明白为什么 index 存在并且var i 不是。:

    for(var i = 0; i < array.length; i++) {
        var index = i;
        array[i].loop = setInterval(function() {
            array[index].test("hello")
        }, 1000);
    }

当我不使用 index var:

时出现此错误

Uncaught TypeError: Cannot read property 'test' of undefined

Answer 1

因为您的 for 循环会立即执行。当你的 setInterval() 第一次执行时，你的 for 循环早就结束了，你的 i 将超出你的数组范围。

例子

在此示例中，我们的 array 的 length 为 3。当我们的 for 循环结束时，我们的 i 变量将等于 3.如果我们在 setTimeout:

中记录 i，数字 3 将在我们的 JavaScript 控制台中显示三次

var array = [1, 2, 3];

for (var i = 0; i < array.length; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

Answer 2

你的尝试在两种情况下都是不正确的，有或没有 index。您的代码中只有 one i 变量，到超时触发时，它将具有值 array.length.

这是一个称为 "closing over the loop variable" 的问题，解决它的一种简洁方法是：

array.forEach(function (item) {
    item.loop = setInterval(function () {
        item.test("hello");
    }, 1000);
});

This question 有几个答案深入解释了您所看到的行为的原因，但是当您使用数组时，大多数高票答案都过于复杂。 forEach 是要走的路。

"setInterval" 中 "for" 的索引

Index of "for" inside "setInterval"

javascript

for-loop

setinterval

例子