Cleartimeout將無法工作

Question

我正在嘗試改進this plugin添加事件處理程序來切換播放/停止時，當您滑鼠mouseenter/mouseleave。我已經看到大量與js函數setTimeout和clearTimeout有相同問題的人，而且我也遇到了麻煩。這是我的

var autoplay; 
container.mouseenter(function(){ 
    autoplay = setTimeout(function() { 
     slide('next'); 
    }, config.auto); 
    console.log('play'); 
}).mouseleave(function(){ 
    clearTimeout(autoplay); 
    console.log('stop'); 

}); 

幻燈片開始顯示在鼠標中，但不要停止，當我做mouseleave。我做錯了什麼？這是一個範圍誤解？我不知道我錯過了什麼。

Answer 1

我不明白爲什麼你的代碼是行不通提供container任何原因有正好之一，它（working example）匹配的元素。如果有可能會匹配多個元素，那麼您將有多個元素共享相同的定時器句柄，並且會變得有點混亂。如果是這樣，使用data存儲句柄實際的元素有關的鼠標事件發生：

container.mouseenter(function(){ 
    $(this).data("autoplay", setTimeout(function() { 
     slide('next'); 
    }, config.auto)); 
    console.log('play'); 
}).mouseleave(function(){ 
    var autoplay = $(this).data("autoplay"); 
    if (autoplay) { 
     clearTimeout(autoplay); 
    } 
    console.log('stop'); 
}); 

Live example

另外，它可能是值得結算autoplay（無論你存儲它），定時器觸發時，那麼你知道你沒有掛起計時器。