防抖和节流 - Azurehuihui/LearnJS GitHub Wiki

防抖与节流

防抖函数

• 防抖： 在事件被触发的n秒后才执行该事件，在这n秒期间事件被再次触发则重新计时

节流函数

• 节流：每隔一段时间 就执行一次事件

防抖与节流的区别

• 相似点

  • 都可以通过setTimeout实现
  • 目的都是为了减少回调函数的执行频率， 节省计算资源

• 不同点

  • 防抖函数是在连续操作结束后，再执行回调函数，利用clearTimeout和setTimeout实现。节流函数是在一段连续操作中，间隔一个时间段就执行一次。
  • 防抖函数关注的是一定时间内连续被触发的事件最后执行的那一次， 而节流函数是 一段时间内执行一次

常见应用场景

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交