Javascript setTimeout scope referencing wrong variables

Question

I've written a little function to loop through a sprite sheet. Within the function I have a settimeout which cycles through the frames. Upon the last frame, the timeout is cleared, the counter is set to zero - and the animation begins again.

This works fine with one animation, but when I try and call many animations - they all start but fail to loop, apart from designSprite which loops quite happily. I call the designSprite anim last....

So I'm guessing the problem is due to variables being overwritten when I call a new intance of the function - setTimeOut referencing the new variables?? I've confused myself. I've had a stab at trying to fix it, but keep failing.

Thanks, Rob

// Arrays to hold our sprite coordinates.
var animationSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var mediaSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var filmSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var designSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
// call the loopAnim function, passing in the sprite array, and id of the div
loopAnim(animationSprite ,'#animationFrame')
loopAnim(mediaSprite ,'#mediaFrame')
loopAnim(filmSprite ,'#filmFrame')
loopAnim(designSprite ,'#designFrame')
function loopAnim(sprite , frameID) {
 var totalFrames = sprite.length; // count how many 'frames' are in our sprites array.
 var count = 0; // set up a basic counter to count which frame we're on.
 var theLoop = function(){
 // Move the background position of our frame by reading the X & Y co-ordinates from the sprites array.
 $(frameID).css("background-position" , sprite[count].X + "px " + sprite[count].Y + "px");
 count++; // increment the frame by 1 on each loop
 // if count is LESS than total number of frames, set a timeout to keep running the "theLoop" function 
 if (count < totalFrames){
 setAnim = setTimeout(theLoop, 60);
 // if count is greater than the total number of frames - clear our timeout. Reset the counter back to zero, and then run our loop function again
 } else {
 clearTimeout(setAnim);
 count = 0;
 theLoop();
 }
 }
 theLoop();
}

Answer 1

setAnim looks like it wasn't declared, meaning it's a global variable. This means all your calls to loopAnim are using and overwriting the same timer ID reference.

• Rob: I'm an idiot... I've just wasted the best part of an hour trying to fathom that one out... ARRGGGHHH!!! thanks for your help with this :)
• tsherif: @Rob The joys of JavaScript programming :) One suggestion: I highly recommend using "use strict" in your code. It helps catch stuff like this.