Question

I have a problem involving setinterval. It’s probably best to show an example so here’s a link here:

http://boudaki.com/testing/carouselTest

Basically I’m having problems making this work like I need it to. When the page loads the content rotates every three seconds and the numbered buttons on the right do so also. when you click on a button the buttons extend and the animation is stopped – all good. Then when you click the little close button at the bottom of the buttons the animation resumes – all good….but then when you come to click on the numbered buttons again the animation keeps on going. Why?

There’s rather a lot of code but the setIntervals and clear intervals are:

• line 69: on document.ready start the animation off -assign timerId to a global var
• line 87: When the user clicks on the numbered button clearinterval in that animation
• line 102: when the user clicks on the close button start the animation again

That’s it….I just don’t get why it doesn’t stop the animation the second time around??? Can anyone see why?

Any ideas?

Answer 1

$closeButton.click(function() { … }); is inside of your loop. That handler is getting added 4 times, so when you click close, 4 timers are added and only 1 is cleared when you open the menu again.