debounce问题

问题描述

debounce 函数返回另一个函数，您可以将其视为类的对象（它具有计时器的“内存”，即 setTimeout id），并且您始终调用使用 debounce() 函数创建的相同函数。但是在第一个示例中，您在每个输入事件上都创建了新的去抖动函数，这会创建新对象而不知道先前的超时。

您不仅将其存储在 const 中，还将 debounced 函数 deplaration 从事件侦听器中移出并仅开始创建一次。

相反，在第一个示例中，您正在为每个“输入”事件创建新的去抖动函数

解决方法

我创建了一个 debounce 函数，代码如下：

  function debounce(func,timeout = 300) {
        let timer;
        return (...args) => {
          if (timer) clearTimeout(timer);

          timer = setTimeout(() => {
            func.apply(this,args);
          },timeout);
        };

现在我在搜索栏的 onChange 事件中使用它。

 search.addEventListener("input",(e) => {
        eventCount++;
        eventOutput.textContent = eventCount;
        debounce(() => {
          apiRequestCount++;
          apiCount.textContent = apiRequestCount;
        },200);
      });

但这不起作用，但是当我使用以下代码时它起作用了。

const debouncedFunction = debounce(() => {
        apiRequestCount++;
        apiCount.textContent = apiRequestCount;
      },200);

      search.addEventListener("input",(e) => {
        eventCount++;
        eventOutput.textContent = eventCount;
        debouncedFunction();
      });

我无法弄清楚为什么它的行为是这样的，两者几乎相同，在第二个中，我只将 debounce 函数存储在 const 中。