setTimeout Problem

[MinusMyThoughts]

Hey, guys!I've only recently started getting into JS, so forgive me if this is a silly question.I'm trying to do a basic animation that lets a user swap between pages. I've got it working (at least on FF3, Safari, and Opera on Mac) so far, but I'm running into a problem if the user clicks a menu item before their last selection has finished the script.Here's a link to the live site: http://builtforshow.ennuidesign.comIt's using basic authentication to keep search engines out, so here's the username and password:U: betatesterP: secretTo see the problem I'm having, click one of the menu items, then click a second one before the animation completes (I wouldn't recommend this for anyone with epilepsy).Also, here's the script:

	<script type="text/javascript">	  function movePage(whereto,dest) {		start=parseInt($("The_Book").style.marginTop);		distance=start-whereto;		move=distance/2;		if(move<1&&move>-1){		  $("The_Book").style.marginTop=parseInt(whereto)+"px";		  $("testing").value="Done"; // This is for my own error checking.		  window.location="#"+dest;		  clearTimeout(t);		  exit;		}		$("The_Book").style.marginTop=(parseInt($("The_Book").style.marginTop)-move)+"px";		$("testing").value="s: "+start+"px | d: "+distance+"px | m: "+move+"px"; // Again, just for error checking.		if(move!=distance) {		  t=setTimeout("movePage('"+whereto+"','"+dest+"')",100);		}	  }		  function $(id) {		return document.getElementById(id);	  } 	</script>

What I'm looking to do is write a check that will cancel the current instance of setTimeout if the user clicks a menu item before the script has completed.Any advice would be greatly appreciated. Thanks in advance!-Jason

[justsomeguy]

Have a global variable that keeps track of whether or not it's currently animating, and only start the animation if there's not already one going on.

	<script type="text/javascript">	  var animating = false;	  function movePage(whereto,dest) {		start=parseInt($("The_Book").style.marginTop);		distance=start-whereto;		move=distance/2;		if(move<1&&move>-1){		  $("The_Book").style.marginTop=parseInt(whereto)+"px";		  $("testing").value="Done"; // This is for my own error checking.		  animating = false;		  window.location="#"+dest;		  clearTimeout(t);		  exit;		}		$("The_Book").style.marginTop=(parseInt($("The_Book").style.marginTop)-move)+"px";		$("testing").value="s: "+start+"px | d: "+distance+"px | m: "+move+"px"; // Again, just for error checking.		if(move!=distance) {		  t=setTimeout("movePage('"+whereto+"','"+dest+"')",100);		}	  }		  function $(id) {		return document.getElementById(id);	  }	</script>

You'll need an extra helper function to start the animation in the first place that will check the variable.

function do_move(a, b){  if (!animating)  {	animating = true;	movePage(a, b);  }}

So your links would call the helper function, which only checks if it's animating and calls the animation function. The animation function will reset the flag once it finishes moving.

[MinusMyThoughts]

I figured it would be something like that, but I was having trouble wrapping my head around the how.Thanks so much! As usual, you've single-handedly rescued my productivity.-Jason