setInterval and clearInterval Help

[Drongo_III]

Hi Guys

 

I'm making a new jquery scrolling banner element. It's very simple at the moment but will be made more complex.

 

To get the basics right I have a script for the banner animation, and then two buttons for 'start' and 'stop'. The animation begins on page load then if i click the "stop" button it calls clearInterval to stop the animation. When I click 'start' button it calls setInterval again to restart.

 

This bit works.

 

However if i click stop, then start then click on stop again nothing happens and the animation just carries on. I am guessing perhaps I am not properly understanding how JS is setting the ID for the new Interval. So when I try to stop the interval the second time it's targeting something that has already been stopped. But I don't know how to do it differently.

 

Can anyone see where I am going wrong?

 

This is the JS

 

<script type="text/javascript" src="jquery.js"></script>


<script type="text/javascript">

$(document).ready(function(){
               
                // Start the banner animation on load
	var int = setInterval("sliding()", 3000);


      // The function to stop the animation
      $('#stopInterval').click(function(){

window.clearInterval(int);

});


          // The function that restarts the animation after it stopped
$('#restartInterval').click(function(){

	var int = setInterval("sliding()", 3000);

});

});

               // The animation function

	function sliding() {


	$("#innerContainer li:first").animate({width:0}, 1000, function(){

			$("ul li:first").insertAfter($("ul li:last"));
			$("ul li:last").css({width: 200});


	});




}



</script>

 

[smoseley]

var int is scoped in your window.load (document-ready) event.

 

Declare it globally (after <script>) and then just access it as "int" (no further var declaration).

[smoseley]

In specific terms:

 

 

<script type="text/javascript">

var int;

$(document).ready(function(){

                // Start the banner animation on load

int = setInterval("sliding()", 3000);

[smoseley]

By the way, try not to use "int" as a variable name... that's a reserved word (integer datatype) in many languages (e.g. Java). 

[Drongo_III]

Hi Smoseley!

 

You're a genius.  Works perfectly now.

 

Out of interest why did you say

Declare it globally (after <script>) and then just access it as "int" (no further var declaration).

. What is the effect of using the var declaration? Does it remake the variable rather than simply updating it?

 

I thought using var infront of variables was sort of 'best practice'.

 

Many thanks,

 

A Happy Drongo

 

By the way, try not to use "int" as a variable name... that's a reserved word (integer datatype) in many languages (e.g. Java).

[smoseley]

Happy to help!

What is the effect of using the var declaration? Does it remake the variable rather than simply updating it?

Exactly.  It will create another instance of "int" in local scope and use that one instead of the global one.

 

I thought using var infront of variables was sort of 'best practice'.

Yes, it's a best practice to declare your variables, but once you've declared it in global scope, you don't have to declare it again in functions.  That'll just create a new address in memory for the local var.

[Drongo_III]

Thanks smoseley! I've learned lots today

 

Happy to help!

What is the effect of using the var declaration? Does it remake the variable rather than simply updating it?

Exactly.  It will create another instance of "int" in local scope and use that one instead of the global one.

 

I thought using var infront of variables was sort of 'best practice'.

Yes, it's a best practice to declare your variables, but once you've declared it in global scope, you don't have to declare it again in functions.  That'll just create a new address in memory for the local var.