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