函数防抖和函数节流

目录

• 函数防抖
• 函数节流

一、函数防抖

在前端开发中，我们经常需要绑定一些持续触发的事件，如resize、mousemove等。但是我们并不是想在事件持续触发时去频繁的触发函数，而是有一个特定的时机来触发函数。

函数防抖就是来解决这样的问题，生活中的例子：电梯，在电梯门打开之后，每一次有人进来，电梯都会进行重新的计时。而电梯关门的时候就是我们真正触发了一整个事件的流程的结束的特定的时机。

函数防抖：触发事件的后 n 秒才执行函数，若在这 n 秒之内又触发了事件，则会重新计算执行时间。

---

• 手写函数防抖

let timer = null;
function fn() {
  console.log("这是一个回调任务函数");
}
element.addEventListener("mousemove", () => {
  if (timer) {
    clearTimeout(timer);
  }
  setTimeout(() => {
    fn();
    timer = null;
  }, 5000);
});

二、函数节流

在前端开发中，我们不希望用户一直点击某个按钮一直频繁的触发某个事件，而是在规定的时间内只触发一次。

生活中的例子：游戏中的技能CD冷却时间。在技能 CD 中的时候，我们无论如何按键或者是点击，都不会触发技能。这个就是很好的例子来说明函数节流的作用。

函数节流：一个事件在 n 秒之后触发，n 秒内该事件不会再次触发，只会触发一次

---

• 手写函数节流

let CD = false;
function fn() {
  console.log("我是回调任务函数");
}
element.addEventListener("click", () => {
  if (CD) {
    console.log("CD正在冷却中！");
  } else {
    CD = true;
    setTimeout(() => {
      fn();
      CD = false;
    }, 3000);
  }
});