防抖和节流的概念及案例整理

前言

防抖和节流在JS中是一个非常重要的方法，这两个方法可以让浏览器的工作量大幅降低。

那么在正式整理之前呢，我们要搞清楚一个问题，那就是防抖（debounce）和节流（throttle）是什么，如何使用它们，它们之间又有什么区别？

在前端开发中会遇到一些频繁的事件触发，比如：
window 的 resize、scroll
mousedown、mousemove
keyup、keydown

如何解决呢?
答：防抖、节流

---

一、概念

1.防抖（debounce）的概念：

防抖是指当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

通俗理解就是：防止用户频繁触发一个事件，只执行该事件的最后一次。

可以用数学来理解：比如有 [2, 5] 和 [8, 11] 两个区间可以看作密集事件发生处，那么整个 [2, 5] 时间最终都只触发一次事件，5 是这次事件结束时，那么等待 time = 3 才再次触发下一次事件

具体代码：

function debounce(func, time) {
   
  let timer = null;
  return function () {
   
    clearTimeout(timer);
    timer = setTimeout(() => {
   
      func.apply(this, arguments);
    }, time);
  };
}

<