去抖功能多次返回

Question

上下文： 这是我第一次尝试实现 debounce() 函数，可能我误解了一些东西，因为它调用了我的 API 多个函数次，虽然它被应用了延迟，但我的代码：

async updateSelectAll(value) {
  const execute = this.debounce(async () => {
    await this.getTotalDaeMunicipio(this.filtroDaeMunicipio);
    await this.gerarGraficoMunicipio();
  }, 1000);
  execute();
},

debounce(func, wait) {
  let timer = null;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, wait);
  };
}

函数 updateSelectAll 每次用户单击复选框时都会调用它，这是有效的。

问题：当用户点击复选框时，函数updateSelectAll被调用，1秒（1000ms）后，API是通过具有 debounce 功能的函数 execute() 调用，但是当用户多次单击复选框时，会多次调用 API。

预期行为： 当多次单击复选框时，只调用一次 API。

Answer 1

您在 debounce 函数中创建了一个局部变量 timer，内部函数关闭并可以访问它。

debounce(func, wait) {
  let timer = null;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, wait);
  };
}

但是，问题是您多次调用 this.debounce()，而不是共享此 timer。您需要在 debounce 调用之间共享此计时器以实现您的目标

去抖功能多次返回

Debounce function returning multiples times

javascript

function

debounce