防抖,顾名思义,就是防止抖动
节流,顾名思义,就是较少次数,控制流量
防抖,重点在于清零的操作:clearTimer(timer)
节流,重点在于开关锁:if(timer) return
防抖的一些具体的使用场景:
1、一些按钮发送请求时,仅需要发送一次请求
2、input输入框输入数据后,完成输入并停止输入动作后,特定时间内才执行搜索结果的展示
3、页面resize时,防止多次触发,在完成拖动后一步到位
具体的代码
throttle(fnc, delay){
if (timer) return
let timer = setTimeout() => {
fnc()
timer = null
}, delay)
}
节流的一些具体的使用场景:
1、浏览器滚动条滚动时,每滚动一段距离执行一次操作;
2、input框输入数据时,每隔一段时间展示一次根据输入内容带出来的搜索结果;
3、浏览器播放事件,每隔一秒计算播放进度~