Solo Solo - 1 year ago 51
Javascript Question

Member of array is undefined, has all the data to get the member

I have an array of elemens, it is populated but all the members are

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);
}





It works without timeout:

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


myArray
is a global value and timeout has access to every data it needs. Why it's still undefined?

Answer Source

When the timeout invokes the function, the loop has already ended, which means the i is equal to 4.

Here's an easy fix:

for(var i = 0 ; i < myArray.length; i++) {
    (function(i) {
        setTimeout(function(i) {

            myArray[i].classList.add('yeah');  

        }, i * 200)
    })(i);
} 

You simply invoke the timeout with each i and pass that i to the function