简单的防抖案例实现

1.防抖是什么？

防抖 (Debouncing) 的含义是指在一定时间内，多次触发同一个事件，只执行最后一次操作。例如，当我们在搜索框中输入关键词时，输入框会不断触发 oninput 事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。此时就可以使用防抖技术，将一定时间内的多次触发合并为一次操作，只请求一次服务器数据，减少了请求次数和服务器负载。 主要作用就是防止某一时间频繁触发。

2.案例

• 提交按钮，点击按钮后LogTips函数会根据传入的时间间隔执行传入的函数

import React from 'react';
import styles from './index.less';
import { Button, SearchBar } from 'antd-mobile';

const Page = () => {

  /**
   * 防抖函数
   * fn：要防抖的函数
   * delay：防抖的时间间隔
   */
  
  function debounce(fn: () => void, delay: number | undefined) {
    //定义一个定时器
    let timer: string | number | NodeJS.Timeout | null | undefined = null;
    // 每次触发的时候 清空上一次的定时器
    const newDebounce = function () {
      if (timer) clearTimeout(timer);
      //根据传进来的延时 执行
      timer = setTimeout(() => {
        fn();
      }, delay)
    }
    return newDebounce;
  }

  const LogTips =()=>{
    console.log('打印一次');
    
  }


  return <div className={styles.PageWrap}>
    <h5>防抖案例：</h5>
    <Button onClick={debounce(LogTips,500)} color='primary' className={styles.btn1}>防抖按钮</Button>
  </div>;
};
export default React.memo(Page);