#说明

将收录防抖与节流操作相关工具

笔记分享：hongjilin

一、防抖

Ⅰ-通用防抖

1. 工具代码写法示例1

//Tool.ts
// 防抖1
  deBounce = (
    fn: (...args: any[]) => any,
    interval: number
  ): ((...args: any[]) => any) => {
    let timer = null;
    return (e) => {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      timer = setTimeout(() => {
        fn(e);
      }, interval);
    };
  };

1. 写法示例2

  /**
   * 防抖1
   * @param fnc 传入函数
   * @param params 
   * @param t 
   * @returns 
   */
  DebounceSendSMSCode = (fnc, params, t) => {
    let delay = t || 200; // 默认0.2s
    let timer;
    return function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        timer = null;
        fnc(...params)
      }, delay);
    }
  }

1. 对于写法2的调用

import { tool } from '~/utils/Tool'
//准备添加防抖的函数
 const sendSMSCode = async (phoneItem, index) => {....}
  // 防抖,传入函数,参数,以及秒数
 onClick={tool.DebounceSendSMSCode(sendSMSCode, [phoneItem, index], 300)}

Ⅱ-Echart防抖自适应

此函数适用于echart

1. 当我需要让Echart的折线图根据当前页面大小发生变化,并且进行防抖处理节约性能

2. 分析:

   1. 利用柯里化与高阶函数的知识点写防抖函数
   2. 利用Echart的 resize()刷新函数进行适配

3. 代码示例

防抖函数代码

  /**
    * 防抖进行echart自适应
    * @param chartDom  传入 echarts.init(chartDom);生成的对象
    */
  debounceEchartResize = () => {
    let timers 
    return (chartDom,interval:number) => {
      if (timers) clearTimeout(timers);
      timers = setTimeout(() => { // 只执行最后一个定时器的 结果
        chartDom.resize()
      }, interval); // 推迟 300 ms 在执行resize 效果 
      // return timer
    }
  }

js调用—>本代码在React hooks 中使用

```tsx import { tool } from ‘~/utils/Tool’ const SaleSumInfo = (props: IProps) => { //柯里化调用防抖自适应,在此处第一次调用,会生成timer,这样就不会因为在副作用函数中 //因为重复渲染而重置 const debounceResize = tool.debounceEchartResize()

//副作用函数,作用是react的生命周期 useEffect(() => { const chartDom = document.getElementById(‘main’); const myChart = echarts.init(chartDom); //形成闭包,同时防止监听事件运行两次回调函数 const resizeFunc=()=>debounceResize(myChart,300) //创建监听事件 window.addEventListener(“resize”,resizeFunc) //销毁的生命周期 进行监听卸载 return ()=>{ window.removeEventListener(“resize”,resizeFunc) }

    //渲染函数
 return ()

} }

> 4. 效果示例图
> ![](JavaScirpt%E5%B7%A5%E5%85%B7%E5%B0%81%E8%A3%85%E4%B8%AD%E7%9A%84%E5%9B%BE%E7%89%87/Echart%E8%87%AA%E9%80%82%E5%BA%94%E9%98%B2%E6%8A%96%E5%87%BD%E6%95%B0%E7%A4%BA%E4%BE%8B.gif#alt=)
<a name="2b0c4f54"></a>
# 二、节流
<a name="59640f64"></a>
## Ⅰ-通用节流
> 代码示例
> ```tsx
// 节流
throttle = (fn: Function, interval: number) => {
   let canRun = true;
   return () => {
     if (!canRun) {
       return;
     }
     canRun = false;
     setTimeout(() => {
       fn();
       canRun = true;
     }, interval);
   };
 };