Skip to content

debounce

防抖函数

参数

参数名参数类型参数说明
fnany目标函数
waitnumber间隔(ms)
immediateboolean是否立即执行

源代码&使用

ts
import { debounce } from  "@manzhixing/utilsxy"

function add(a:number, b:number){
  console.log(a+b)
}

const add1 = debounce(add, 1000);

add1(1, 2)
add1(2, 3)
add1(3, 4)

// 1s 后控制台只打印一个 7

add1(4, 5)
add1(6, 7)
add1(7, 8)
add1.cancel()

// 1s 后控制台不会打印任何内容
ts
/*
 * @Author: Chengbotao
 * @Contact: https://github.com/chengbotao
 */
export function debounce(fn: any, wait: number, immediate = false) {
  let timer: ReturnType<typeof setTimeout> | null;
  const lambda = function (this: unknown, ...values: unknown[]) {
    const args = Array.prototype.slice.call(values);
    if (timer) clearTimeout(timer as ReturnType<typeof setTimeout>);

    // 立即执行
    if (immediate) {
      const callNow = !timer;

      timer = setTimeout(() => {
        timer = null;
      }, wait);

      if (callNow) {
        fn.apply(this, args);
      }
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, wait);
    }
  };

  // 取消功能
  lambda.cancel = function () {
    clearTimeout(timer as ReturnType<typeof setTimeout>);
    timer = null;
  };

  return lambda;
}