javascript - clearInterval 在点击时不会清除(但在悬停时工作正常)

Question

我制作了一个 slider ，它可以很好地自动播放，悬停时暂停并在模糊时重新开始。太棒了。

但是当您单击时，它会开始一个新的间隔并以 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);

您应该在自动播放中清除Interval，以便在一次又一次调用时清除旧的setInterval。

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