debounce() function

debounce 函数用于延迟执行提供的函数,直到自上次调用防抖函数以来经过指定的时间段。该函数通过限制函数的执行频率来优化性能,特别是在处理用户输入事件、滚动或调整大小等场景中。此外,防抖函数允许您在第一次调用时立即执行函数（当 leading 设置为 true 时）,并且可以使用 .cancel() 方法手动取消。

Signature:

declare function debounce<T extends (...args: any[]) => void>(
  func: T,
  wait: number,
  options?: {
    leading: boolean;
  },
): ((...args: Parameters<T>) => void) & {
  cancel: () => void;
};

Example

const debounced1 = debounce((val: number) => {
  console.log("val", val);
}, 100);

debounced1();
debounced1();
debounced1(); // invoke func after 100ms

const debounced2 = debounce(
  (val: number) => {
    console.log("val", val);
  },
  100,
  { leading: true },
);
debounced2(); // immediately invoked func
debounced2();
debounced2(); // invoked func after 100ms

const debounced3 = debounce((val: number) => {
  console.log("val", val);
}, 100);
debounced3();
debounced3();
debounced3.cancel(); // cancel func

Open Source Code