Skip to content
On this page

防抖节流

debounce<T>

示例代码
ts
import { debounce } from '@jsxiaosi/utils';

  // 基础
  const deb = debounce(() => {
    console.log('执行一次 500毫秒');
  }, 500);

  const onDebounceClick = () => {
    deb();
  };

   // 立即执行
  const debImmediate = debounce(
    () => {
      ElMessage.success('立刻执行一次');
    },
    500,
    true,
  );

    // 带参数的防抖
  const debValue = debounce<(name: string) => void>((name) => {
    console.log(`执行一次带参数的 ${name}`);
  }, 500);

  const onDebounceValueClick = () => {
    debValue('jsxiaosi');
  };


  // 获取返回值
  const asyncValue = (): Promise<string> => {
    return new Promise((rej) => {
      setTimeout(() => {
        rej('我是异步的');
      }, 500);
    });
  };

  const debAsync = debounce<() => Promise<string>>(
    () => {
      console.log(`执行一次异步函数`);

      return asyncValue();
    },
    500,
    (result) => {
      console.log(`通过callback获取异步回调的参数 ${result}`);
    },
  );

  const onDebounceAsyncClick = () => {
    debAsync();
  };

参数:

参数说明类型默认值
func需要防抖处理的函数T extends (...args: any[]) => any
wait防抖的时间间隔(毫秒)number
immediate立即执行:点击按钮先执行而不是先等待防抖时间boolean
callback获取需要防抖函数的返回值(result: ReturnType<T>) => void

返回类型:(...args: any[]) => void

throttle<T>

示例代码
ts
import { throttle } from '@jsxiaosi/utils';

  // 基础
  const deb = throttle(() => {
    console.log('执行一次');
  }, 1000);

  const onThrottle = () => {
    deb();
  };

  // 带参数的节流
  const debValue = throttle<(name: string) => void>((name) => {
    console.log(`执行一次带参数的 ${name}`);
  }, 1000);

  const onThrottleValue = () => {
    debValue('jsxiaosi');
  };

  // 获取返回值
  const asyncValue = (): Promise<string> => {
    return new Promise((rej) => {
      setTimeout(() => {
        rej('我是异步的');
      }, 1000);
    });
  };

  const debAsync = throttle<() => Promise<string>>(
    () => {
      console.log(`执行一次异步函数`);

      return asyncValue();
    },
    1000,
    (result) => {
      console.log(`通过callback获取异步回调的参数 ${result}`);
    },
  );

  const onThrottleAsync = () => {
    debAsync();
  };

参数:

参数说明类型默认值
func需要防抖处理的函数T extends (...args: any[]) => any
wait防抖的时间间隔(毫秒)number
callback获取需要防抖函数的返回值(result: ReturnType<T>) => void

返回类型:(...args: any[]) => void