JavaScript的反跳：如何獲取e.target？

Question

我正在使用https://davidwalsh.name/javascript-debounce-function中的反跳實現。

現在的問題是：如何從事件偵聽器獲取事件（例如目標），並在反跳功能中使用它？

這是我想出的：

document.querySelector('textarea')
  .addEventListener('input', (e) => {
     debounce(
         () => { console.log('debounce at '+e.target.value); },
         1000,
         false
     )(e); // add (e) so that the function debounce returns gets called inside the anonymous function
  });

問題在於它會立即觸發（並且去抖動效果會被有效消除）。

Answer 1

您需要包裝輸入事件處理程序，如下所示：

function handler(e) {
  console.log('debounce at '+e.target.value); 
}
const debouncedHandler = debounce(handler, 1000)
document.querySelector('textarea').addEventListener('input',debouncedHandler, false)

現在，當事件觸發時，它將調用相同的處理程序，而不是新的處理程序

演示