CODEWITHSUNDEEP
javascriptsettimeoutsetinterval
charliemagee
charliemagee

Reputation: 693

setInterval, clearInterval, setTimeout conflict messing up slideshow

I've got a slideshow that autoplays on document.ready by triggering my left arrow click on setInterval. I'm trying to stop the autoplay when the nav arrows are clicked, while still allowing the arrows to navigate the slides.

This accomplishes that.

var intervalId = window.setInterval(switchLeft, 4000);

$("#leftarrow, #rightarrow").click(function() {
    window.clearInterval(intervalId);
});

But I want the autoplay to kick back in if the arrows haven't been clicked in 8 seconds. I have tried turning the setInterval back in by adding this setTimeout into the click function, but it counts all the clicks of user navigation during the pause and starts throwing my slides around like crazy. (I've got two layers of images moving on every click.)

setTimeout(function() {
  intervalId = window.setInterval(switchLeft, 4000)
}, 8000);

I've tried wrapping stuff in a setTimeout function but I just end up getting different weirdness.

Thanks for any help, Charlie Magee

Upvotes: 1

Views: 1834

Answers (1)

jfriend00
jfriend00

Reputation: 708056

You need to cancel the setTimeout() if the arrows are clicked before it fires so you don't get multiple timers going at once (which will certainly exhibit weirdness).

I don't follow exactly what you're trying to do on the arrows, but this code should manage the timers:

var intervalId = setInterval(switchLeft, 4000);
var timeoutId;

$("#leftarrow, #rightarrow").click(function() {

    // clear any relevant timers that might be going 
    // so we never get multiple timers going
    clearInterval(intervalId);
    clearTimeout(timeoutId);

    // restart the interval in 8 seconds
    timeoutId = setTimeout(function() {
        intervalId = window.setInterval(switchLeft, 4000)
    }, 8000);
});

Upvotes: 1

Related Questions