Stop setInterval and start it again

Question

I'm using this set interval function:

    function ticker(){
        setInterval(function(){
            $('.slide').fadeToggle();
        }, 5000);
    }

What I want to do is that when the user clicks on a div with onclick="topbartoggle" the setInterval function stops, and if he clicks again on it the setInterval function begins to work again:

function topbartoggle(){
    $('#top-bar').toggleClass('active');
    $('.top-bar-box').slideToggle();
    $('.top-bar-close').fadeToggle();   
}

Any idea on how to do this?

possible duplicate of [Stop setInterval call in JavaScript](http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) — Assaf Lavie, Apr 13 '14 at 15:47
The return value of `setInterval` is a timer ID that can be passed to `clearInterval` to stop the timer. Now, if you wanted to really *pause* the timer, i.e. have it maintain the delay it would have had if you hadn’t paused it after you resume it… that would be harder. — Ry-, Apr 13 '14 at 15:48
how would that be possible @minitech? that would be the greatest solution for this issue. — codek, Apr 13 '14 at 15:50

score 2 · Accepted Answer · answered Apr 13 '14 at 15:55

var tickerID = false; 
function ticker(){ 
    tickerID = setInterval(function(){ 
         $('.slide').fadeToggle(); 
    }, 5000); 
}

To stop the ticker, use

clearInterval(tickerID);

To start it again, just call ticker();

EDIT: Understanding that you need to toggle the ticker, add this to your toggling function:

if(tickerID != false) {
    clearInterval(tickerID);
    tickerID = false;
} else { ticker(); }

score 1 · Answer 2 · edited Apr 13 '14 at 16:00

1

setInterval returns a handle you can use to stop the interval, like this:

var myInterval = setInterval(function() { // myInterval should be global
    something();
}, 5000);

function stopInterval()
{
    clearInterval(myInterval);
}

So you can do like this:

<div onclick="stopInterval();anyOtherFunction();"></div> //anyOtherFunction could be any function you want.

edited Apr 13 '14 at 16:00

Giacomo1968

25,759
11
71
103

answered Apr 13 '14 at 15:48

mort

704
2
9
21

But using this `onclick` I will lost the other actions I already have in the `topbartoggle` function. – codek Apr 13 '14 at 15:52
@codek you can call one or more functions on onclick event by seperating them with ; as you can see in the edited version of above html two functions are called on onclick. – Syed Shoaib Abidi Apr 13 '14 at 16:05
yeah it stops it, but how can I start it again after clicking on it? – codek Apr 13 '14 at 16:26

score 1 · Answer 3 · answered Apr 13 '14 at 15:52

1

Since you want to maintain the same delay, it’s probably easiest to just keep the timer running:

var shouldTick = true;
var $slide = $('.slide');

setInterval(function () {
    if (shouldTick) {
        $slide.fadeToggle();
    }
}, 5000);

function topbartoggle() {
    shouldTick = !shouldTick;
    $('#top-bar').toggleClass('active');
    $('.top-bar-box').slideToggle();
    $('.top-bar-close').fadeToggle();   
}

answered Apr 13 '14 at 15:52

Ry-

218,210
55
464
476

Thanks minitech but now `$slide.fadeToggle` is not working at the load of the page. It just stays there without fading to the other div automatically – codek Apr 13 '14 at 16:00
@codek: Did you include the script after `.slide` in the page? If not, it needs to be in a `$(document).ready(…)`. – Ry- Apr 13 '14 at 16:06
I'm wrapping it all in a `$(document).ready(…)` but when I click on the `div` with `onlick="topbartoggle"` I get: `topbartoggle is not defined` – codek Apr 13 '14 at 16:11
@codek: Don’t use inline event handlers; just add it dynamically in external JavaScript with `$('#topbartoggle').on('click', topbartoggle);`. (Still, you could also move `function topbartoggle()` out of the `ready`.) – Ry- Apr 13 '14 at 16:27

Stop setInterval and start it again

3 Answers3