1分钟告诉你”节流“”防抖“的故事

前言

平时在浏览一些App或网页时候，经常因为网络比较慢就焦躁地狂点按钮。于是界面砰砰砰地弹窗，或连续跳转至同一个页面。碰到这类糟糕的体验，即应用的防抖、节流工作没有做好。

定义

先简单认识一下这两个方法，可直接使用lodash包的方法

throttle(cb, time, options) // 节流
debounce(cb, time, options) // 防抖

使用防抖、节流，即可控制回调方法调用的次数，避免上述场景中的问题。

除了直接使用lodash，也可以自己实现，原理比较简单，就是个定时器的控制。很多博文都有写过，不再赘述。

适用场景

相信第一次使用的同学，虽然大致了解方法的用途，但依然对两个方法有所混淆，对一些配置参数也一知半解。那么，为了更好地理解这两个方法的区别，请看下方的比喻，相信一定会对其有更感性的认识。

• 节流
  • 常用比喻：【定时开闸的水管】一段时间t内只能放行1次；t为机械控制，无人能干扰
  • 适用：检测滚动、检测窗口大小变更；一段间隔内更新一次
• 防抖
  • 常用比喻：【智能电梯】一段时间t内不再有人上电梯，即出发；t会根据最新进入者重新计时
  • 适用：input数量输入、防止连续点击按钮等；防止触发多次

time

继续往下前，先明确何为连续调用：

第二个参数time，即时间区间，在该区间t内的多次触发，视为连续调用

options

配置参数中比较有用的当属leading和trailing了，控制t区间一头一尾是否调用回调函数：

leading  // 头部调用 throttle默认true, debounce默认false
trailing // 尾部调用 throttle默认true, debounce默认true

所以连续触发的话：

• 节流模式第一次点击立即触发，每次t计时结束再调1次
• 防抖模式在t计时结束后才调1次

案例

• 滚动加载更多throttle(cb, 500, { leading: false })
• 文本框输入数字 debounce(cb, 500)
• 连续点击支付按钮 debounce(cb, 500, { leading: true, trailing: false })

希望本文能让你对这两个方法有进一步的认识：）