js 消抖(debounce)与节流(throttle)
Posted SeaBoat
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 消抖(debounce)与节流(throttle)相关的知识,希望对你有一定的参考价值。
概念
debounce 和 throttle 都是用来减少事件触发的频率,用来减少服务器请求压力,优化页面。
debounce 实现
// 接受一个函数并返回一个debounce函数
function debounce(func, wait) {
let timerId
return function(...args) {
timerId && clearTimeout(timerId)
timerId = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
throttle 实现1
// 接受一个函数并返回一个throttle函数
function throttle(func, wait = 100) {
let timerId
let start = Date.now()
return function(...args) {
const curr = Date.now()
clearTimeout(timerId)
if (curr - start >= wait) {// 可以保证func一定会被执行
func.apply(this, args)
start = curr
} else {
timerId = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
}
throttle 实现2
function throttle(func, wait = 100){
let disabled = false
return function(...args) {
if(disabled){
return false
}
disabled = true
setTimeout(() => {
func.apply(this, args)
disabled =false;
}, delay)
}
}
两种方法有些许区别,以点键盘输入事件为例,第一种方法事件触发次数总会比第二种多一次,但是避免最后一次输入完无响应的情况。
对比
debounce(去抖)和 throttle(节流)的对比,单纯的从中文名字理解比较难理解区别,中文是英译过来的。
去抖可以理解为去抖延时,事件只会在调用完,一定时间间隔后被触发,有一种延时的效果。
节流可以理解为节流降速,在规定时间内,不管动作调用多少次,只发一次动作,降低动作频率。
打个小比方。如果有一天你看一个网站不爽,你想手动增加他的服务器载荷,于是你使劲的点他的搜索按钮,碰巧你又是一个精力充沛的小伙,以每秒一次手速,点击了24个小时。
这个时候如果对方使用了debounce技术,间隔是2s,你会发现你点了一天一夜,最后只请求了一次,是在最后一次点击2s之后发生。
如果对方使用了throttle技术,间隔也是2s,那么请求次数就是24x60x60/2次,不管你点击速度多快,它总是2s请求一次,很平稳。
以上是关于js 消抖(debounce)与节流(throttle)的主要内容,如果未能解决你的问题,请参考以下文章
js 函数节流 jQuery throttle/debounce