I have made a custom slider with jQuery. For this I have used setInterval function:

timer = setInterval(function() {},  8000);

But I cannot pause and resume the interval. I have 2 buttons (play, pause) which I want to use for. Lets say I click pause after 3 sec, and then resume it. So it should stay in that slider for 5 more seconds and then go to the next one and continue 8 seconds each. I have seen this kinda slider with mouseover pause, but can't do it by myself. I have tried this:

clearInterval(timer);

But this seems reset the interval, don't pause. Can anyone help :)

I have made a custom slider with jQuery. For this I have used setInterval function:

timer = setInterval(function() {},  8000);

But I cannot pause and resume the interval. I have 2 buttons (play, pause) which I want to use for. Lets say I click pause after 3 sec, and then resume it. So it should stay in that slider for 5 more seconds and then go to the next one and continue 8 seconds each. I have seen this kinda slider with mouseover pause, but can't do it by myself. I have tried this:

clearInterval(timer);

But this seems reset the interval, don't pause. Can anyone help :)

• javascript
• jquery
• slider
• setinterval

• The code looks fine. But ... did you check if the timer variable is correctly set when you call the clearInterval function? – jeronimo vallelunga Commented Apr 7, 2015 at 17:42
• I think your question isn't clear enough since nobody (edit: someone has answered your question) gave an answer that really answer it (sarcasm). JavaScript doesn't have that kind of built in function. That being said, it make your question a little bit out of topic for SO since you're asking for code. Anyhow, you are probably better with a timer library, im sure there one already existing. – Karl-André Gagnon Commented Apr 7, 2015 at 17:44

3 Answers 3

I'm not entirely sure that's something native to jQuery, however, you could use a flag to pause it, and check in your setInterval whether to execute.

Edit: Found something that might be useful to you, the jquery-timer

Alternitively, you can keep track of the id set by setInterval, and clear out out when you'd like to pause. Then you can set it again when you wish to resume:

var id = window.setInterval(<code>); //create
window.clearInterval(id); //pause
id = window.setInterval(<code>); //resume

there are two ways of acplish this:

1. Clearing the interval everytime you pause and starting a new interval when you resume it.

2. Having a flag to tell the function in the interval when it is paused and it should not do anything.

The first solution would work like this:

let intervalId = false;
const intervalLength = 8000; // 8 seconds

function intervalFunction () {
   // do stuff.
}

startButton.onclick = function () {
    if (intervalId === false) {
        intervalId = setInterval(intervalFunction, intervalLength);
    }
}

pauseButton.onclick = function () {
    if (intervalId !== false) {
        clearInterval(intervalId);
        intervalId = false;
    }
}

// auto start it:
intervalId = setInterval(intervalFunction, intervalLength);

The second solution would work like this:

var isRunning = true;
var interval = setInterval(function() {
    if (!isRunning) {
        // not running, do nothing
    } else {
        // it is running, do stuff.
    }
}, 8000);

pauseButton.onclick = function () {
    isRunning = false;
};
startButton.onclick = function () {
    isRunning = true;
};

I am not plete sure, that what you are asking for, is the right thing you are showing us... setInterval basically is pure native javascript and in my opinion not worth using! If you wan't to set your timeouts via jquery try this link: http://jchavannes./jquery-timer. You can find usages there...

Now on to your problem... you need a state to check wether the slider has to slide or not... simply set a bool like this...

var timer;
var doSlide = false;
var i = 0;

function Slide(){

    timer = setTimeout(function(){

        if(doSlide == true){
            Slide();
            i++; // Same as i = i + 1
            console.log('Sliding');

            if(i == 3) AbortSlide(); /* Abort on third slide! Dont use this in your logic!*/

        } else if(doSlide == false){
            console.log('Sliding aborted untill next RunSlide() call!')
            clearTimeout(timer);
        }

    },1000);

}

function AbortSlide(){
    doSlide = false;
    i = 0;  // Resetting the count! Dont use this in your logic!
}

function RunSlide(){
    doSlide = true;
    Slide();
}

RunSlide();

You could also empty the interval in the abort method:

function AbortSlide(){
    doSlide = false;
    clearTimeout(timer);
    i = 0; // Resetting the count! Dont use this in your logic!
}

Here is a working fiddle i made for you to understand what timers and intervals are for: https://jsfiddle/q5qzmv68/7/

Hope this helps! Cheers!