数组的成员是未定义的，它拥有获取该成员所需的所有数据

Question

我有一个元素数组，它已填充，但所有成员都是undefined。

// Result: [div.some-class, div.some-class, div.some-class, div.some-class]
console.log(myArray);
// Result: 4
console.log(myArray.length);
for(var i = 0 ; i < myArray.length; i++) {
    setTimeout(function() {
        console.log(myArray[i]); // <- This is "undefined"
        console.log(myArray);    // <- Successful log: has access to array
        console.log(i);          // <- Successful log: has access to "i"
        // Uncaught TypeError: Cannot read property 'classList' of undefined
        myArray[i].classList.add('yeah');  
    }, i * 200);
} 

---

不超时:

for(var i = 0 ; i < myArray.length; i++) {
    // No errors -> it works
    myArray[i].classList.add('yeah');  
} 

myArray是一个全局值，timeout可以访问它需要的所有数据。为什么它仍然未定义?

Answer 1

当超时调用该函数时，循环已经结束，即i = 4。

这里有一个简单的修复:

for(var i = 0 ; i < myArray.length; i++) {
    (function(i) {
        setTimeout(function(i) {
            myArray[i].classList.add('yeah');  
        }, i * 200)
    })(i);
} 

您只需调用每个i的超时，并将该i传递给函数