前端知库

怎样实现只在停止调用后执行的防抖函数?

参考答案

防抖将短时间内密集发生的调用合并。下面实现的是尾沿执行版本:距离最后一次调用经过 wait 后才执行,保留最后的参数与 this,并支持取消。它不包含首沿执行、最大等待时间或返回 Promise 等扩展语义。

JavaScript
function debounce(fn, wait) {
  let timer;
  function wrapped(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
      fn.apply(this, args);
    }, wait);
  }
  wrapped.cancel = () => {
    clearTimeout(timer);
    timer = undefined;
  };
  return wrapped;
}

适合搜索建议等允许等待输入停顿的场景。持续输入可能一直不触发;组件卸载时应取消未执行任务。计时器延迟是调度条件,不是精确执行时刻。异步请求本身的取消和返回顺序还需要另外处理。