节流防抖的区别和应用场景

1. 节流

概念理解

  • 设置一个节流阀，每次执行操作前，先判断节流阀是否为空，当节流阀为空时，表示可以执行下一次操作，否则不能执行下次操作
  • 例如：高铁的卫生间是否被占用,由红绿灯控制,假设一个每个人上洗手间要五分钟,则五分钟之内别人不可以使用,上一个使用完毕之后,将红灯设置为绿灯,表示下一个人可以使用了.下一个人在使用洗手间时需要先判断控制灯是否为绿色,来知晓洗手间是否可用.

应用场景

  • 鼠标不断触发某事件时,如点击,只在单位事件内触发一次.
  • 懒加载时要监听计算滚动条的位置,但不必要每次滑动都触发,可以降低计算频率,而不必要浪费CPU资源
  • input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)

2. 防抖

概念理解

  • 设置定时器，当事件触发后，延迟 n 秒后再执行回调函数，如果在这 n 秒内再次触发事件，则重新计时。
  • 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

应用场景

  • 登录发短信按钮，避免用户多次点击发起多次请求
  • 调整浏览器大小 resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
  • 文本编辑器实时保存，当无任何更改操作一秒后进行保存
  • 联想输入法，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。