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.
Comments
Post a Comment