乐趣区

什么是防抖和节流他们的应用场景是哪里

本题摘自于我 github 上的面试每日一题:https://github.com/shfshanyue…,并有大厂面经及内推信息,可在左下角打开原文链接

防抖 (debounce)

防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。

想要了解一个概念,必先了解概念所应用的场景。在 JS 这个世界中,有哪些防抖的场景呢

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

代码如下,可以看出来 防抖重在清零 clearTimeout(timer)

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

节流 (throttle)

节流,顾名思义,控制水的流量。控制事件发生的频率,如控制为 1s 发生一次,甚至 1 分钟发生一次。与服务端 (server) 及网关 (gateway) 控制的限流 (Rate Limit) 类似。

  1. scroll 事件,每隔一秒计算一次位置信息等
  2. 浏览器播放事件,每个一秒计算一次进度信息等
  3. input 框实时搜索并发送请求展示下拉列表,没隔一秒发送一次请求 (也可做防抖)

代码如下,可以看出来 节流重在开关锁 timer=null

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

总结 (简要答案)

  • 防抖:防止抖动,单位时间内事件触发会被重置,避免事件被误伤触发多次。代码实现重在清零 clearTimeout
  • 节流:控制流量,单位时间内事件只能触发一次,如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null

关注我

扫码添加我的微信,备注进群,加入高级前端进阶群

<figure>
<img width=”240″ src=”https://user-gold-cdn.xitu.io/2020/6/29/172fe14e18d2b38c?w=430&h=430&f=jpeg&s=38173″ alt=” 加我微信拉你进入面试交流群 ”>
<figcaption> 加我微信拉你进入面试交流群 </figcaption>
</figure>

欢迎关注公众号【互联网大厂招聘】,定时推送大厂内推信息及面试题简答,每天学习五分钟,半年进入大厂中

<figure>
<img width=”240″ src=”https://user-gold-cdn.xitu.io/2020/6/30/17302a9e47a3a422?w=430&h=430&f=webp&s=7634″ alt=” 更多大厂招聘,面试面经,技能要求,请关注公众号【互联网大厂招聘】”>
<figcaption> 每天五分钟,半年大厂中 </figcaption>
</figure>

退出移动版