asynchronous - Having some issues with my non-blocking Javascript -

this.plotted = [jquery('#img1'), jquery('#img2'), jquery('#img3')];  blah.prototype.animate = function() {     if (!this.plotted.length)         throw 'blah::animate - no points have been plotted';      // fix scope     var _this = this;      var animateon = function(image)     {         image.attr('src', _this.options.pointactive);          settimeout(function() { animateoff(point); }, 700);     }      var animateoff = function(image)     {         image.attr('src', _this.options.pointdefault);          settimeout(function() { animateon(point); }, 700);     }      (var = 0; < this.plotted.length; i++)     {         var point = this.plotted[i];          settimeout(function() { animateon(point); }, 700);     } } 

i'm trying animate these 3 images switching src between 'on' , 'off' image. don't want 'sequential'. ie, don't want see first image change, second , third.

i'm using settimeout accomplish this. well, i'm trying to...

firstly, problem i'm having settimeout inside for loop.

for (var = 0; < this.plotted.length; i++) {     var point = this.plotted[i];      console.log(point); // correctly shows each image point      settimeout(function()     {         console.log(point); // shows same, first, point         animateon(point);     }, 700); } 

i have no idea inner point isn't matching outer point :/

also, know if method is, well, stupid. these nested function calls continually build onto stack , cause me run out of ram? there better way approach this?

this doesn't work because of how closures work.

i'd this:

var makeanimatestarter = function(point) {   return function() {      animateon(point);   }; };  (var = 0; < this.plotted.length; i++) {   var point = this.plotted[i];    settimeout(makeanimatestarter(point), 700); } 

and it's not problem stack point of view. every time timeout executed, it's in new call stack. that's why require _this. settimeout() not suspending thread @ point , resuming it's executing function fresh.