JavaScript 中的簡單去抖 function

Question

給定一個去抖 function 如下：

const debounce = (fn, delay) => {
  let timer;
  return () => {
    if(timer) clearTimeout(timer);
    timer = setTimeout(fn, delay)
  }
}

document.getElementById("mybutton").addEventListener('click', debounce(()=>console.log("Clicked"),1000))

每次觸發按鈕時，它都會調用“去抖動”function，我的問題是“定時器”變量怎么可能沒有被重新初始化？ 據我所知，“let”關鍵字 scope 是塊范圍的，那么“計時器”如何保存上次調用的 setTimeOut 標識？

每條評論都值得贊賞，謝謝。

Answer 1

每次觸發按鈕時，都會調用“去抖”function...

不，它只被調用一次——當你添加事件處理程序時。 代碼.addEventListener('click', debounce(()=>console.log("Clicked"),1000))調用debounce並將其返回值傳遞給addEventListener ，與foo(bar())調用bar並傳遞的方式完全相同將其返回值轉換為foo 。 debounce的返回值為一個debounce ； function 是傳遞給addEventListener的內容，因此function 是每次事件發生時調用的內容，而不是debounce 。

這就是為什么只有一個timer變量的原因，因為只有一次debounce調用。 它返回的 function 關閉了變量。

---

在評論中，您要求進行一些澄清：

另一個相關的問題是，當“去抖動”返回內部 function 並傳遞給“addEventListener”時，返回的 function 在另一個“點擊”事件之后是否保持不變？

是的。 它是一個 function。 這段代碼：

document.getElementById("mybutton").addEventListener('click', debounce(()=>console.log("Clicked"),1000));

與此代碼完全相同，除了此代碼具有上面代碼沒有的標識符之外：

const eventHandlerFunction = debounce(()=>console.log("Clicked"),1000);
document.getElementById("mybutton").addEventListener('click', eventHandlerFunction);

該問題的另一種說法是：每次單擊按鈕時都不會重新創建返回的 function 的執行上下文

調用debounce的執行上下文僅在您調用debounce時創建一次。 該執行上下文包含timer變量。 只要有東西引用它們，上下文（以及變量）就會被保留。 function debounce創建（上面代碼中的eventHandlerFunction ）對它們有引用，因此只要 function 存在，它們就存在。

（因為“譴責”function 在第一次單擊按鈕后執行已經消失，我應該說在第一次單擊按鈕后“計時器”變量不再存在。）？

只要eventHandlerFunction繼續存在， timer變量就會繼續存在。 function 將繼續存在，直到對它的所有引用都被釋放——在這種情況下，要么將其從元素的click事件處理程序列表中刪除，要么當元素本身消失時。