Question

Here what I’m trying to do.
I’m having an array like the following

var my_array = ['1', '2', '3' ... ,'1000000000000000'];

What I want to do is create a bunch of HTML elements for every element of that array, and since the array can contain a huge number of elements I attempted to do the following so the browser won’t freeze.

for(var i in my_array)
{
    if(my_array.hasOwnProperty(i))
    {
       setTimeout(function(){
             do_something_with_data(my_array[i]);
       });
    }
 }

What happens though is that the my_array[i] within the setTimeout doesn’t have the value it should.

To be more accurate, when I try to console.log(my_array[i]) what I get is something like this:

"getUnique" function (){
   var u = {}, a = [];
   for(var i = 0, l = this.length; i < l; ++i){
      if(u.hasOwnProperty(this[i])) {
         continue;
      }
      a.push(this[i]);
      u[this[i]] = 1;
   }
   return a;
}

getUnique is a function I’ve added to the Array prototype just like this:

Array.prototype.getUnique = function(){
   var u = {}, a = [];
   for(var i = 0, l = this.length; i < l; ++i){
      if(u.hasOwnProperty(this[i])) {
         continue;
      }
      a.push(this[i]);
      u[this[i]] = 1;
   }
   return a;
};

Can please somebody help me with this issue?

Answer 1

the setTimeout is executed after the loop is done, and i is the last key or some garbage value at that point. You can capture the i like so:

for (var i in my_array) {
    if (my_array.hasOwnProperty(i)) {
        (function(capturedI) {
            setTimeout(function() {
                do_something_with_data(my_array[capturedI]);
            });
        })(i);
    }
}

You should also not use for..in loops for arrays because it’s an order of magnitude slower (especially so with the .hasOwnProperty check) than a for loop and the iteration order is not defined

If you have jQuery or willing to add some extra code for older browsers, you can do:

my_array.forEach( function( item ) {
     setTimeout( function() {
         do_something_with_data( item );
     }, 1000);
});

With jQuery:

$.each( my_array, function( index, item ) {
     setTimeout( function() {
         do_something_with_data( item );
     }, 1000);
});

See docs for [].forEach