前端防抖和节流

防抖和节流的区别
防抖：短时间内触发了多个setTimeout只会执行最后一个，每次执行都会先清除前一个定时器，再重新执行新的定时器；
节流：短时间内触发多个setTimeout，只会执行第一个，当第一个执行完后，才可以继续触发后面的setTimeout；

原理概念：防抖和节流的原理都使用到了闭包的概念：闭包的好处是里面的变量只会在闭包中使用，也就是外部的函数是不能使用这个变量的，也就不会修改这个变量，就不会受到外部的污染

使用场景（具体因人而异，还得看需求场景是怎么样的）

防抖

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；
2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖；
3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存。

节流 

1. 鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
2. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
3. 浏览器播放事件，每个一秒计算一次进度信息等。

防抖代码：

        

// 防抖
export const debounce = (
  fn: (args: any) => void,
  delay: number | undefined
) => {
  let timer: string | number | NodeJS.Timeout | undefined;
  return (...args: any) => {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

节流
 

// 节流
export function throttle(fn: Function, delay: number) {
  let lock = true;
  return () => {
    if (lock) {
      lock = false;
      setTimeout(() => {
        fn(arguments);
        lock = true;
      }, delay);
    }
  };
}