在前端的面试中,经常会问到 防抖 和 节流 的问题,这里我简单的说一下自己的理解。
防抖:
-
在任务高频率触发的时候,只有触发间隔超过指定间隔的时间,任务才会执行
-
在每次函数执行之前先清空上一次设置的定时器,原因是:如果执行间隔大于n秒,那么先前的定时任务一定已经执行完毕,当执clearTimeout时,其实并没有定时器可清楚,否则定时器会被清除,然后重新计时
function debounce (fn,wait,immediate){
var timer = null;
console.log(fn,wait,immediate,'aaa')
return ()=>{
//判断首次是否需要立即执行
if(immediate){
console.log('立即执行')
fn.call(this,arguments)
immediate = false;
}
//清除定时器
clearInterval(timer)
timer = setTimeout(()=>{
console.log('再次执行')
fn.call(this,arguments)
},wait)
}
}
节流:
-
在指定间隔内任务只执行一次
-
在每次函数执行之前,先判断是否存在定时器,存在则跳过本次执行,否则设置新的定时器
function debounce (fn,wait,immediate){
var timer = null;
console.log(fn,wait,immediate,'aaa')
return ()=>{
//判断首次是否需要立即执行
if(immediate){
console.log('立即执行')
fn.call(this,arguments)
immediate = false;
}
//如果当前存在定时器,返回;否则设置定时器
if(timer) return ;
//清除定时器
clearInterval(timer)
timer = setTimeout(()=>{
console.log('再次执行')
fn.call(this,arguments)
},wait)
}
}
区别:
- 一定时间内任务执行的次数
- 节流 – 被调用n次,只在time间隔时间点运行
- 防抖 – 被调用n次,只执行一次