重置超時的正確方法是什么？

Question

所以我有一個這樣的功能：

function blabla(){
    ...

    setTimeout(() => {
        //do some stuff
    }, 10000) 
}   

現在，如果調用了函數並且尚未完成超時，如何重置超時時間（ 10000 ）？
我試圖消除超時，如果它確實像這樣存在：

function blabla(){
    ...

    if(to){
       clearTimeout(to)
    } 

    let to = setTimeout(() => {
        //do some stuff
    }, 10000) 
}  

但我得到的錯誤是to不確定。 那么檢查超時是否存在的正確方法是什么。 有一個更好的方法嗎？

Answer 1

你只需要申報to在之前if ，所以它的存在時， if運行（並沒有未定義）。 直到稍后，您不必提供實際值。

實際上，您可能想在函數外部聲明它，因此它將在下次調用該函數時保持不變。

這是一個可運行的演示。 請注意，盡管兩次調用blablah（），但您只會看到一次“ hello”，因為對函數的第二次調用取消了原始超時。

 var to; function blabla() { //... if (to) { clearTimeout(to) } to = setTimeout(() => { //do some stuff console.log("hello"); }, 10000) } blabla(); blabla(); 

Answer 2

不要使用let ， let范圍位於功能塊內部。 如果您第二次調用該函數，則該函數沒有定義。 使用var以便在整個函數調用中都可以訪問它。

Answer 3

最好不要使用全局變量，因為它不可重用。 該函數的寫包裝更好，因為它是通用模式。 此本地代碼或使用npm數據包

防反跳功能包含在許多JavaScript庫中。 每個實現背后的目標是通過防止一個函數被連續調用多次來減少開銷。 無論使用哪種庫，所有的反跳功能都是基於JavaScript的本地setTimeout函數構建的。

https://www.npmjs.com/package/debounce ：

 function debounce(func, wait, immediate) { let timeout; return function() { let context = this, args = arguments; let later = function() { timeout = null; if (!immediate) func.apply(context, args); }; let callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; var blabla = debounce(function(){ console.log(5) }, 5000); blabla() blabla()