停止setInterval并重新启动

Question

我正在使用此设置间隔功能：

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

我想做的是，当用户单击带有onclick="topbartoggle"的div ， setInterval函数停止，并且如果他再次单击它，则setInterval函数将再次开始工作：

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

关于如何执行此操作的任何想法？

Answer 1

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

要停止股票行情，请使用

clearInterval（tickerID）;

要再次启动它，只需调用ticker（）;即可。

编辑：了解您需要切换股票行情，将此添加到您的切换功能：

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

Answer 2

setInterval返回一个可用于停止间隔的句柄，如下所示：

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

function stopInterval()
{
    clearInterval(myInterval);
}

所以你可以这样：

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

Answer 3

由于您希望保持相同的延迟，因此最简单的方法就是保持计时器运行：

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();   
}