Question

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

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

我想要做的是，当用户点击div onclick="topbartoggle" 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();   
}

停止setInterval并再次启动它

3 个答案: