throttle(节流)和debounce(防抖)

时间:2024-01-09 22:10:26

防抖和节流都是用来控制频繁调用的问题,但是这两种的应用场景是有区别的。

throttle(节流)

有一个调用周期,在一个很长的时间里分为多段,每一段执行一次。例如onscroll,resize,500ms执行一次

// 使用时间差
function throttle (fun, wait) {
let previous = 0 return function (...args) {
let now = Date.now()
let context = this
if (now - previous > wait) {
fun.apply(context, args)
previous = now
}
}
} // 使用定时器
function throttle1 (func, wait) {
let timeout
return function (...args) {
let context = this
if (!timeout) {
timeout = setTimeout(function () {
timeout = null
func.apply(context, args)
}, wait)
}
}
}

debounce(防抖)

在一定时间内不调用,只调用一次。例如input事件,停止输入500ms之后再执行。

function debounce (fun, delay) {
let time = null
return function (...args) {
let ctx = this
clearTimeout(time)
time = setTimeout(function () {
fun.apply(ctx, args)
time = null
}, delay)
}
}