clearInterval沒有清除點擊（但在懸停工作正常）

Question

我做了一個滑塊，它自動播放罰款，暫停懸停並再次開始模糊。大。

但是，當你點擊它，它開始一個新的時間間隔和x2一樣快，我不能讓它清除？

這裏是我的代碼：

// Reset autoPlay() if a user clicks a nav button 
$('#sliderNav a').click(function(e) { 
    setTimeout(autoPlay(), delay); 
}); 

// Auto play the slider 
var delay = 4000; // 4 seconds 
function autoPlay() { 
    myInterval = setInterval(function() { 
     currentOffset += itemWidths[clickCount] // Add the current slides width to total offset 
     $sliderWrap.animate({right: currentOffset}, 500, function() { 
      clickCount++; 
      // If this is the last slide when clicking .next, slide to clone then snap back to beginning. 
      if (itemWidths.length == clickCount) { 
       clickCount = 0; 
       currentOffset = totalWidth; 
       $sliderWrap.css('right',currentOffset); // Where we started originally 
      } 
     }); 
    }, delay); 
}  
autoPlay(); 

// Stop autoPlay() on hover 
$('#slider, #sliderNav a').hover(function() { 
    clearInterval(myInterval); 
}, 
// start autoPlay() on blur 
function() { 
    autoPlay(); 
}); 

實際工作演示，所以你可以看到它的實數：http://www.jonheslop.com/canoe/

Answer 1

你應該通過函數引用，而不是函數的返回值

use setTimeout(autoPlay, delay); instead of setTimeout(autoPlay(), delay); 

您應該在autoPlay中clearInterval，以便在一次又一次調用時清除較早的setInterval。

var myInterval ; 
    function autoPlay() { 
     clearInterval(myInterval); // clear older setInterval. 
     myInterval = setInterval(function() { 
      .............. 

Answer 2

使用全局變量來存儲的setTimeout的ID：

var timer = 0; 

$('#sliderNav a').click(function(e) { 
    timer = setTimeout(autoPlay(), delay); 
}); 

...

// Stop autoPlay() on hover 
$('#slider, #sliderNav a').hover(function() { 
    clearInterval(timer); 
}, 

....

Answer 3

你有一個bug

setTimeout(autoPlay(), delay); <-- you are calling the function right away. 

您需要刪除（）

setTimeout(autoPlay, delay);