JS防抖和节流

防抖和节流是一个面试过程中被面频率非常高的，为此来总结一下，加强对防抖和节流的认识。

目录

• 目录
• 防抖和节流作用
• 防抖和节流区别
• 防抖和节流适用场景
• 防抖和节流的代码实现
• 防抖和节流的生活场景理解
• 汇总

防抖和节流作用

• 防抖和节流的作用都是防止用户频繁操作事件函数多次调用。它们都是用来提升前端性能，减轻浏览器压力。

防抖和节流区别

防抖重在重置清零，节流重在开关锁

• 防抖：高频事件触发，n 秒内函数只能执行一次，如果在 n 秒内这个事件再次被触发的话，那么会重新计算时间（代码实现重在清零 clearTimeout。）

• 节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率（代码实现重在开锁关锁 timer=timeout; timer=null）

防抖和节流适用场景

• 防抖适用场景：

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

• 节流适用场景：

1. scroll 事件，每隔一秒计算一次位置信息等

2. 浏览器播放事件，每个一秒计算一次进度信息等

3. input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)

防抖和节流的代码实现

1. 防抖代码实现

function debounce(f, wait) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      f(...args);
    }, wait);
  };
}

2. 节流代码实现

function throttle(f, wait) {
  let timer;
  return (...args) => {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      f(...args);
      timer = null;
    }, wait);
  };
}

防抖和节流的生活场景理解

1. 防抖生活场景理解

场景 1. 做电梯，电梯会等没人进来了，再等一会，才关闭；

场景 2. input 输入框，输入内容搜索，在停下输入过一会后，才发起请求获取匹配的数据；

场景 3. 玩游戏读条，只有读条结束才可以输出，如果读条被打断，要重新读条

2. 节流生活场景理解

场景 1. 看电影，每秒有 24 帧，意思是每 1 秒的动画，播放了 24 张连续的图片；

场景 2. 滚动条加载更多，监听滚动条位置时，设置每 1s 监听一次，而不是无限次监听；

场景 3. 节流相当于玩游戏某技能的 cd，cd 时间未到不会执行

汇总

函数防抖的时候,每次调用事件都是在正常执行暂停后一段时间

函数节流的时候,则是每隔一定的时间间隔就触发一次