乐趣区

函数节流(throttle)与函数去抖(debounce)

前言
做过前端的童鞋应该都知道 lodash 这个强大的使用工具库。为什么要写这篇文章呢,主要今天遇到一个问题,socket 推送消息太频繁,导致 saga 频繁更新,页面有所卡顿,需要通过函数节流控制,发现自己突然不会写这样的代码,而且模糊了节流和抖动的区别。简单实现一下,源码其实复杂的多。
区别
节流:一些场景频繁触发,导致页面崩溃,资源加载重复等行为,需要控制执行频率,这个时候就叫做节流。去抖:主要针对的是频繁触发某个事件后,然后进行后续处理的场景。常见的就是频繁输入停止 3s(假设) 后进行查询等操作。
_.debounce
函数接口定义:
@param fn 实际需要调用的函数 @param second 空闲时间 @return callback 返回调用函数
const debounce = (fn, second) => {
let timer = null
return () => {
clearTimeout(timer)
timer = setTimeout(() =>{
fn()
}, second)
}
}
_.throttle
函数接口定义:
@param delay 延迟时间 @param fn 需要调用的函数 @return cb 返回函数
const throttle = (fn, delay) => {
let last = 0
return () => {
let current = new Date()
if(current-last > delay) {
fn()
last = current
}
}
}

退出移动版