jQuery - 懸停和重新啓動時間間隔

Question

有幾個答案，但我沒有真正理解。

所以，任何幫助將是偉大的！

我區間

setInterval(function(){ 
    nextThumb.trigger("click"); 
    nextBanner(); 
    bannerLoop(); 
}, 1500); 

清除間隔？

$('#thumbs, #banner').hover(function(){ 
    clearInterval(); 
}); 

所以，當我將鼠標懸停在#thumbs或#banner我希望我的時間間隔暫停。當我的鼠標離開時，我希望它從停止的地方恢復。

謝謝你的時間！

Answer 1

clearInterval()不暫停的間隔;它清除它。您需要恢復懸停意圖中的時間間隔。這是特別棘手的，如果你可以使用匿名函數，所以你最好能夠重構你的代碼如下：

var intveral = 1500; 

function intervalCall() 
{ 
    nextThumb.trigger("click"); 
    nextBanner(); 
    bannerLoop(); 
} 

var myInt = setInterval(intervalCalll, interval); 

$('#thumbs, #banner').hover(function(){ 
    clearInterval(myInt); 
}, function() { 
    myInt = setInterval(intervalCalll, interval); 
}); 

Answer 2

您需要將setInterval呼叫分配給某個變量：

var myInterval = setInterval(function(){ 
... 

，然後把它傳遞給clearInterval功能：

clearInterval(myInterval); 

要重新恢復它，你需要使用分配myInterval創造新setInterval將在您的範圍內可見的變量。

所以，你的代碼應該是這樣的：

var myInterval; 

function createInterval() { 
    myInterval = setInterval(function(){ 
     nextThumb.trigger("click"); 
     nextBanner(); 
     bannerLoop(); 
    }, 1500); 
} 

createInterval(); 

$('#thumbs, #banner').hover(function(){ 
    clearInterval(myInterval); 
}, function() { 
    createInterval(); 
}); 

Answer 3

首先，創建兩個函數啓動和停止的時間間隔，並跟蹤區間ID：

var intervalID; 
function startInterval() { 
    stopInterval(); 
    intervalID = setInterval(function(){ 
     nextThumb.trigger("click"); 
     nextBanner(); 
     bannerLoop(); 
    }, 1500); 
} 

function stopInterval() { 
    if (intervalID) 
     clearInterval(intervalID); 
    intervalID = null; 
} 

然後，你想，當你將鼠標懸停在停止的時間間隔，然後重新啓動它，當你的鼠標了：

$('#thumbs, #banner').hover(stopInterval, startInterval); 

最後，最初開始的時間間隔：

startInterval();