Question

我一直想弄清楚如何在setInterval（）函数中暂时停止计时器。我正在使用它来旋转横幅，我希望它能够“重置计时器”，或者如果点击缩略图则更长时间停留在特定图像上。

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

这是我到目前为止所做的：

（注意：为简化而排除其他代码）

//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);    

});

任何建议/帮助都会很棒！：）

Answer 1

这个怎么样？

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

Answer 2

考虑使用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);
}

Answer 3

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

Answer 4

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

停止setInterval（）函数一段时间

4 个答案: