Question

I have a little problem with a homemade script, first I’ll give you the script

    var heighti = $(window).height();
var imageLoading = new Array();
$('.fullHeight').css({'height' : heighti});
    var now,hour,minute,second,dateNow = new Array(),countImg=0,i=0,countDateNow = 0;countImg=0,countThis=0,countDateNowAj=0;
        /* GET THIS HOUR */
        now = new Date();
        hour      = now.getHours();
        minute    = now.getMinutes();
        second    = now.getSeconds();
    function date(){
        //Function to get date
}
function loadImage(){
    countThis = 0;
    while(countThis < 6){
    date();
    var imgOn = 'uploads/original/'+dateNow[countDateNowAj]+'.jpg';
    console.log(imgOn);
    var img = $("<img />").attr('src', imgOn)
                  .load(function(){
                    imageLoading[i] = imgOn ;
                    i++;
                  })
                  .error(function(){
                  console.log('This is the image now : '+imgOn);
                    imageLoading[i] = 'images/noimage.jpg';
                    i++;
                  });
        countThis++;
        countDateNowAj++;
    }
}


setInterval("dateImg()",1000);
setTimeout("loadImage()",0);
setInterval("loadImage()",5000);

So this is my function, everything works but when I want to do imageLoading[i] = imgOn; the script take always the last value.

This is a log of what I’m talking about : http://minus.com/mpWvBsXkQ

First I check the time
After I check the image who is gonna be checked
And at the end I check the name of imageLoading[i] = imgOn;

And I always get the last time and not every second.

I hope you’ll understand my query.

Answer 1

In the load and error handler functions, you are using variables from the outer scope (in this case the scope will be the loadImage function) asynchronously, but they will be changed synchronously as part of the loop. If you want to have them held constant until the handlers are actually called, you will need to use a closure:

function loadImage(){
   function imageLoader(i, imgOn) {
      console.log(imgOn);
      var img = $("<img />").attr('src', imgOn)
         .load(function(){
            imageLoading[i] = imgOn ;
         })
         .error(function(){
            console.log('This is the image now : '+imgOn);
            imageLoading[i] = 'images/noimage.jpg';
         });
   }

   for(countThis = 0; countThis < 6; countThis++, countDateNowAj++) {
      date();
      imageLoader(i++, 'uploads/original/'+dateNow[countDateNowAj]+'.jpg');
   }
}

In this case, the imageLoader inner function becomes the scope that the load and error handlers run in, so the values of i and imgOn are as you would expect rather than always being the last values they had when the loop finished running.