停止setInterval（）函數一段時間

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

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 2

這個怎麼樣？

//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 3

一個簡單的可能性是設置一個標誌和具有bannerUpdate函數在決定是否真正更新之前先看一下。

Answer 4

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