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

发布于 2022年 01月 17日 14:36

前言

平时在浏览一些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 })

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

推荐文章