react 函数组件和类组件使用防抖

react 类组件使用防抖

import debounce from "lodash/debounce";

this.callAjax = debounce(this.callAjax, 300);

callAjax = () => {
    this.query();
};

react 函数组件使用防抖

  function submitAuth() {
    if (authprogress === 1) {
      deSubmit();
    }
    if (authprogress === 2) {
      deRecurrent();
    }
  }

  const deSubmit = debounce(submit, 500);
  const deRecurrent = debounce(recurrent, 500);

  function debounce(callback: any, time: number) {
    let timer: any = null;
    // 返回一个新的函数
    return function (event: any) {
      // 判断
      if (timer !== null) {
        //清空上一个定时器
        clearTimeout(timer);
      }
      // 启动定时器
      timer = setTimeout(() => {
        // 执行回调
        callback.call(this, event);
        // 重置定时器
        timer = null;
      }, time);
    };
  }

  async function submit() {
    await orgAuthMethod(); // 请求接口
  }

  async function recurrent() {
     await orgAuthMethod(); // 请求接口
  }