clearTimeout在關閉

Question

我創建了一個jQuery插件具有以下結構：

(function($){ 

var timer_handle, i = 5 ; 

$.my_plugin = function(){ 
    return{ 
    // provide $.my_plugin.reset() public method to reset 
    reset : function(){ clearTimeout(timer_handle); } 
    } 
}(); 

$.fn.my_plugin = function(){ 

    // init codes ... 

    function tick(){ 
     i -= 1; 
     console.log(i+'sec elapsed'); 
     if(i == 0){ 
     console.log('time over'); 
     $.my_plugin.reset(); 
     } 
     timer_handle = setTimeout(tick, 1000); 
    } 
    tick(); 
} 
})(jQuery); 

$('body').my_plugin(); 

當我在控制檯中看到，後0秒過去了，計數器仍在負運行， 即setTimeout的尚未清除。 正如我所研究的，公共方法 $ .my_plugin.reset（）;從外部調用清除計時器， 但在tick標記內調用$ .my_plugin.reset（）不清除計時器。

什麼可能是這種情況下，解決方案?????

Answer 1

因爲你調用從$.my_plugin.reset();內的tick()功能沒有超時清除。先前計劃的超時已經發生，這就是爲什麼tick()正在執行。 （此無關的代碼是否處於關閉或沒有。）

相反，只是不設置下一個超時，如果i已經達到0：

function tick(){ 
    i -= 1; 
    console.log(i+'sec elapsed'); 
    if(i == 0){ 
    console.log('time over'); 
    } else { 
    timer_handle = setTimeout(tick, 1000); 
    } 
} 

如果你打電話$.my_plugin.reset();外tick()然後會有一個突出的超時可以被清除，因此它會停止tick()再次運行。

注意，在立即調用匿名函數聲明你timer_handle和i變量意味着對你的插件所有呼叫都將訪問這些相同的變量，所以如果你在網頁上運行你對一個以上的元素插件，你會得到不正確的行爲同一時間。