Javascript八股

节流与防抖

防抖：就是指连续触发事件但是在设定的一段时间内中只执行最后一次
应用场景：搜索框搜索输入 文本编辑器实时保存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let timerId = null;

document.querySelector(".ipt").onkeyup = function () {

  // 防抖

  if (timerId !== null) clearTimeout(timerId);

  

  timerId = setTimeout(() => {

    console.log("我是防抖");

  }, 1000);

};

节流：就是指连续触发事件但是在设定的一段时间内中只执行一次函数。
例如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次
记忆方法：不要打断我
应用场景：
高频事件例如 快速点击 鼠标滑动、resize 事件、scroll 事件
下拉加载
视频播放记录时间等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let timerId = null;

document.querySelector(".ipt").onmouseover = function () {

  // 节流

  if (timerId !== null) return;

  timerId = setTimeout(() => {

    console.log("我是节流");

    timerId = null;

  }, 100);

};
  1. 防抖：单位时间内，频繁触发事件，只执行最后一次

    典型场景：搜索框搜索输入
    代码思路是利用定时器，每次触发先清掉以前的定时器（从新开始）

  2. 节流：单位时间内，频繁触发事件，只执行一次

    典型场景：高频事件快速点击、鼠标滑动、resize 事件、scroll 事件
    代码思路也是利用定时器，等定时器执行完毕，才开启定时器（不要打断）