TypeScript防抖节流函数示例详解

/**
 * @description 防抖函数
 * @param {Function} fn
 * @param {number} delay
 * @param {boolean} immediate
 * @returns {Function}
 */
export function debounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number,
  immediate: boolean = false
): T & { cancel(): void } {
  let timerId: ReturnType<typeof setTimeout> | null = null; // 存储定时器
  // 定义一个cancel办法,用于勾销防抖
  const cancel = (): void => {
    if (timerId) {
      clearTimeout(timerId);
      timerId = null;
    }
  };
  const debounced = function (
    this: ThisParameterType<T>,
    ...args: Parameters<T>
  ): void {
    const context = this;
    if (timerId) {
      cancel();
    }
    if (immediate) {
      // 如果 immediate 为 true 并且没有正在期待执行的定时器，立刻执行指标函数
      if (!timerId) {
        fn.apply(context, args);
      }
      // 设置定时器，在延迟时间后将 timeoutId 设为 null
      timerId = setTimeout(() => {
        timerId = null;
      }, delay);
    } else {
      // 设置定时器，在延迟时间后执行指标函数
      timerId = setTimeout(() => {
        fn.apply(context, args);
      }, delay);
    }
  };
  // 将 cancel 办法附加到 debounced 函数上
  (debounced as any).cancel = cancel;
  return debounced as T & { cancel(): void };
}

/**
 * 节流函数
 * @param func 要进行节流的指标函数
 * @param delay 节流的工夫距离（毫秒）
 * @returns 返回一个通过节流解决的函数
 */
export function throttle<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): T {
  let lastCall: number | null = null; // 上一次调用的工夫戳
  return function (
    this: ThisParameterType<T>,
    ...args: Parameters<T>
  ): ReturnType<T> | void {
    const now = Date.now(); //以后工夫戳
    // 如果之前没有调用过,或者工夫距离超过了设定的值,执行指标函数
    if (!lastCall || now - lastCall >= delay) {
      lastCall = now;
      return fn.apply(this, args);
    }
  } as T;
}