javascript - 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.johnheslop.com/canoe/

Answer 1

你应该传递函数的引用而不是函数返回值

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

您应该在 autoPlay 中清除Interval，以便在一次又一次调用时清除旧的 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

你有一个错误

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

您需要删除 ()

setTimeout(autoPlay, delay);