为什么我必须在 setTimeout 中使用高阶函数作为第一个参数？

编程问答 2022-05-25

问题描述

我有以下代码：

HTML：

<button class="clickMe">Click Me</button>

JS：

const clickMe = document.querySelector('.clickMe');

const debounce = (fn,delay) => {
  let timeoutId;
  return function(...args) {
    if(timeoutId) {
      clearTimeout(timeoutId);
    } 
      timeoutId = setTimeout(() => {
        fn(...args)
      },delay)
  }
}

clickMe.addEventListener('click',debounce((e) => {
  console.log('clicked')
},300));

在这一行：

timeoutId = setTimeout(() => {
        fn(...args)
      },delay)

我尝试像这样直接传递 fn(...args)：

timeoutId = setTimeout(fn(...args),delay)

但这行不通。为什么我们需要一个高阶函数来返回内部函数？

解决方法

实际上，您不需要将您的函数调用封装到另一个匿名函数中。您可以使用以下语法：-

timeoutId = setTimeout(func,delay,...args);

也不是高阶函数。 高阶函数可以接受一个函数作为参数，也可以返回一个函数，或者两者都做。你可以说 setTimeout 是一个高阶函数。

有关此语法的更多信息，请查找 - https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

debouncejavascriptsettimeoutthrottling