防抖与节流

防抖

防抖是点击后的n秒后执行，如果在n秒内再次触发，则重新进行计算（即可以理解为最后一次）

export const debounce = (fn = () => {}, delay = 200) => {
  let timer;
  return (...args) => {
    const event = args[args.length - 1];
      
    clearTimeout(timer);
    //处理React合成事件
    if (event && typeof event.persist === "function") {
      event.persist();
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      clearTimeout(timer);
    }, delay);
  };
};

节流

节流是单位时间内只会触发一次

export const throttle = (fn, delay = 200) => {
  let timer= null;
  return (...args) => {
    if (!timer) {
      return;
    }
    //处理React合成事件
    const event = args[args.length - 1];
    if (event && typeof event.persist === "function") {
      event.persist();
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      clearTimeout(timer);
      timer=null;
    }, delay);
  };
};

场景

防抖：
搜索框搜索输入
节流：
搜索框的联想功能

在React中关于 防抖、节流需要注意的一点——关于合成事件

因为React中事件为合成事件,且React出于性能考虑，在事件回调被调用后，事件会被重用且所有属性将无效，（即异步调用会出现问题）
所以当在fn中调用合成事件，React会抛出一个红色warning。

解决方法：
event.persist()
这将从事件池中删除合成事件，并保留用户对事件的引用
具体文档可以看这里