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