停止setInterval()函数一段时间

Stop setInterval() function for an amount of time

本文关键字：函数 一段时间 setInterval 停止      更新时间：2023-09-26

我一直在试图弄清楚如何才能暂时停止setInterval()函数上的计时器。我用它来旋转通过一个横幅，我想它"重置定时器"或停留在一个特定的图像更长时间，如果缩略图被点击。

我已经有了click设置的事件处理程序。

这是我目前为止写的:

(注:为简化，不包括其他代码)

//Set interval of fade effect
setInterval( "bannerRotate()", 7000 );
//Click function for banner thumbnails
$('#banner ul li .banner_thumb').click(function(){
    $('#banner ul li .banner_thumb').parent().removeClass("selected");
    $(this).parent().addClass("selected");
    //this is where I tried to make it wait but obviously this didn't work 
    setTimeout("bannerRotate()", 10000);    
});
任何建议/帮助将是伟大的!:)

考虑使用setTimeout代替setInterval，并在bannerRotate函数结束时更新:

var timer = setTimeout("bannerRotate()", 7000);
$('#banner ul li .banner_thumb').click(function () {
     $('#banner ul li .banner_thumb').parent().removeClass("selected");
     $(this).parent().addClass("selected");
     //this is where I tried to make it wait but obviously this didn't work 
     clearTimeout(timer);
     setTimeout("bannerRotate()", 10000);
});
function bannerRotate() {
     //..your code
     timer = setTimeout("bannerRotate()", 7000);
}

这个怎么样?

//Set interval of fade effect
var timer = setInterval(bannerRotate, 7000 );
//Click function for banner thumbnails
$('#banner ul li .banner_thumb').click(function(){
    $('#banner ul li .banner_thumb').parent().removeClass("selected");
    $(this).parent().addClass("selected");
    // if you already have a timer running, kill it
    if (timer) {
        clearTimeout(timer);
    }
    // now re-bind the setTimeout to timer with a new delay
    timer = setTimeout(bannerRotate, 10000);
});

现在，如果你想"暂停"计时器，这可能更像你想要的:

var delayFor = 0, normalDelay = 7000, timer;
function bannerRotate() {
    if (delayFor) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            delayFor = 0;
            timer = setInterval(bannerRotate, normalDelay);
        }, delayFor);
    }
    // normal bannerRotate code here
}
//Set interval of fade effect
timer = setInterval(bannerRotate, normalDelay);
//Click function for banner thumbnails
$('#banner ul li .banner_thumb').click(function(){
    $('#banner ul li .banner_thumb').parent().removeClass("selected");
    $(this).parent().addClass("selected");
    // extend the current delay time by 3 seconds
    delayFor = 3000;
});

var timeoutId = 0;
function startCountdown() {
   timeoutId = setTimeout(function () {
       bannerRotate();
   }, 7000); 
}
function bannerRotate() {
    ...
    startCountdown(); // Otherwise it will just run once
}
$('#banner ul li .banner_thumb').click(function(){
    $('#banner ul li .banner_thumb').parent().removeClass("selected");
    $(this).parent().addClass("selected");
    // Clear the existing timeout then restart after 10 seconds
    clearTimeout(timeoutId);
    setTimeout(function () {
        startCountdown();
    }, 10000);    
});

一种简单的可能性是设置一个标志，并让bannerUpdate函数在决定是否真正更新之前查看它。

相关文章：