js 函数防抖和节流

34次阅读

共计 444 个字符,预计需要花费 2 分钟才能阅读完成。

函数节流
function throttle(fn, delay = 2000) {
let Timer = null

return function () {

let Now = +new Date()

if (Now – Timer >= delay || !Timer) {
fn.call(this, …arguments)
Timer = Now
}
}
}
函数防抖
function debounce(fn, delay = 300) {
let Timer

return function() {
let _arg = arguments
let _this = this

if (Timer) {
clearTimeout(Timer)
}

Timer = setTimeout(() => {
fn.apply(this, _arg)
}, delay);
}
}
总结:
其实函数节流和防抖都是闭包的运用,保存外部函数中的变量值,只不过节流是在多次操作中取第一次,而防抖是取多次操作中的最后一次,具体原因是因为 setTimeout 是 eventloop 中的宏任务,在主线程代码执行完毕之后才会执行其中的回调方法。

正文完
 0