#1
  1. Plays with fire
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    941
    Rep Power
    96

    Need help with setTimeout()


    So I'm animating some sprites and am using setTimeout to change things at certain points, but for some reason it's misbehaving.

    My code:

    Code:
    function running() {
    			spriteElement.style.backgroundPosition = curPx + 'px 0px';
    			curPx -= frameWidth;
     
    			if (curPx == 540) {
    				curPx = spriteWidth;
    			}
    			
    			$("#sprite").animate({"left": stopPoint},2000,"linear",function() {
    				move=1
    				startTurning();
    			});
     
     
     			if (move==0) {
    				ti = window.setTimeout(running, 80);
    			}
     
    		}
    		
    		function startTurning() {
    			clearTimeout(ti);
    			$('#sprite').css('background-position','450px, 0px');
    			curPx=360;
    			ti=setTimeout(turning,80);
    		}
    		
    		function turning() {
    			clearTimeout(ti);
    			spriteElement.style.backgroundPosition = curPx + 'px 0px';
    			curPx-=frameSize;
    			
    		}
    		
    		running();
    the function running() works fine. When the jquery animate() function stops, it moves on as expected, though without the "move" variable it doesn't. The setTimeout keeps firing even after I call the clearTimeout.

    Anyway, it gets to startTurning() and does it's thing then starts the turning() function where it seems to return to startTurning(). What happens after a setTimeout finishes? Does it return to where it was triggered or continue from the function it triggered?

    Any help is appreciated.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,296
    Rep Power
    7170
    First, it's good practice to give your variable appropriate scope using the var keyword. For example, at the top of your script declare var ti; so people know it is shared between those functions, and inside the running function declare var move; so that people know the variable belongs only to that function. Otherwise it's really hard to figure out which variables belong to which scope.

    Second, I'm pretty sure this code will end up creating many timers because:
    (1) running is called every 80 milliseconds
    (2) running always creates a new timer unless move is 0
    (3) move does not become 0 until after 2000 milliseconds

    So when you do a clear on ti, you're only clearing the most recent timer. You've lost the reference to the others at that point, so can't clear them.

    What happens after a setTimeout finishes? Does it return to where it was triggered or continue from the function it triggered?
    No, neither, setTimeout is asynchronous. After it's done, it's just done. The code after your setTimeout call continues executing immediately after the initial call, before setTimeout has triggered at all.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  4. #3
  5. Plays with fire
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    941
    Rep Power
    96
    Thank you!

    I was wondering about how calls the Timeout was making. This is my first stab at sprite animation with JS so this was actually copied from seaofclouds.com.

    Also the move var was a last-minute idea and I wasn't sure if I'd need it again so I made it global.

    Guess I have a lot more tinkering ahead.

    Thanks again.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  6. #4
  7. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,296
    Rep Power
    7170
    I just realized you're using setTimeout instead of setInterval, so the problem with creating multiple timers is actually less of an issue than it would have been if you were using setInterval. However, it's more appropriate in a case like this to use setInterval rather than setTimeout anyway.

    Tracking the animation state, like you're doing with move, is important.

    You might consider a structure like this using setInterval:
    Code:
    var isRunning = 0;
    var isTurning = 0;
    
    function running() {
    	if(!isRunning) {
    		// animation initialization code
    		isRunning = setInterval(running, 80);
    		return; // return optional here depending on whether you want to animation the first frame immediately or after 80ms
    	}
    	
    	// running animation step
    	
    	if(<is done running>) {
    		clearInterval(isRunning);
    		isRunning = 0;
    		turning();
    		// animation finish code
    	}
    }
    
    function turning() {
    	if(!isTurning) {
    		// animation initialization code
    		isTurning = setInterval(turning, 80);
    		return; // return optional here depending on whether you want to animation the first frame immediately or after 80ms
    	}
    	
    	// running animation step
    	
    	if(<is done turning>) {
    		clearInterval(isTurning);
    		isTurning = 0;
    		// animation finish code
    	}
    }
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  8. #5
  9. Plays with fire
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    941
    Rep Power
    96
    I thought about using setInterval initially, but never used setTimeout so thought I give it a try.

    setInterval may actually work better, but I like the code you've posted. It's given me more to think about.

    Thank you again.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence

IMN logo majestic logo threadwatch logo seochat tools logo