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

【问题标题】：Why do I have to use a high order function as first argument in setTimeout?为什么我必须使用高阶函数作为 setTimeout 中的第一个参数？
【发布时间】：2021-05-17 19:44:14
【问题描述】：

我有以下代码：

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)

但这不起作用。为什么我们需要一个高阶函数来返回该内部函数？

【问题讨论】：

因为是回调。超时后将执行的函数。当您调用像fn(...args) 这样的函数时，您会急切地强制评估，因此设置超时没有意义，因为该函数已经在该点运行
它不是高阶函数，它不返回内部函数。它只是调用fn。
协助 Bergi ...higher order function 是一个返回函数的函数，而一个服务于例如作为另一个函数的参数被称为first class 公民。 Lakshya Thakur 已经澄清了其他一切。

标签： javascript settimeout throttling debounce

【解决方案1】：

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

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

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

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

【讨论】：