一 : 是什么?
本质上是优化高频率执行代码的一种手段
定义:
节流 : n秒内只运行一次 , 若在n秒内重复触发 只有第一次生效
防抖 : n秒后在执行该事件 若在n秒内被重复触发 则从新计时
有个经典比喻 :
假设电梯有两种运行策略 debounce
和 throttle
,超时设定为15秒,不考虑容量限制
电梯第一个人进来后,15秒后准时运送一次,这是节流
电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖
代码实现
节流
可以使用定时器和时间戳的写法
使用时间戳写法 时间会立即执行 停止出发后没有办法再次执行
使用定时器写法,delay
毫秒后第一次执行,第二次事件停止触发后依然会再一次执行
可以将时间戳写法的特性与定时器写法的特性相结合,实现一个更加精确的节流。实现如下
防抖
简单版本
防抖如果需要立即执行,可加入第三个参数用于判断,实现如下
二 : 区别
相同点 :
都可以通过使用 setTimeout 实现
目的都是 降低回调执行频率 节省计算资源
不同点 :
函数防抖 : 在一段连续操作后 处理回调,利用 clearTimeout 和 setTimeout 实现 .
函数节流 ,在一段李连续操作中 没一段时间只执行一次,频率较高的事件中使用来提高性能
函数防抖关注一定事件连续触发的事件 只在最后一次执行 , 而函数节流一段时间内只执行第一次
三 : 应用场景
防抖在连续的事件 , 只需触发一次回调的场景有 :
搜索框搜索输入 . 只需用户最后一次输入完 , 再发送请求
手机号 邮箱验证码输入检测
窗口大小 resize 只需窗口调整完成后 计算窗口大小 防止重复渲染
节流在间隔一段时间执行一次回调的场景有:
滚动加载 加载更多或滚动到底部监听
搜索框 搜索联想功能