防抖,就是短时间调用多次,只指定最后一次。
防抖的实现思路?答,利用定时器。
记忆思路:从新开始。
let timerId = null;
document.querySelector('#ipt').onkeyup=function(){
//防抖
if(timerId !==null){
clearTimeout(timerId)
}
timerId = setTimeout(()=>{
console.log('防抖输出')
},1000)
}
在上述代码中,首次进来,不执行清楚,执行定时器。
如果定时器没到时间,又进来方法,则清除定时器,console不会输出。
累加此结果,直到不会清除定时器,也就执行最后一次调用。
节流,指连续触发事件,但是在设定的一段时间内只执行一次的函数。1秒内触发多次,只在1秒后执行一次。
记忆思路:不要打断我。
let timerId = null
document.querySelector('#ipt').onmouseover = function(){
if(timerId !==null){
return; //如果有个定时器正在执行,直接return出去
}
timerId = setTimeout(()=>{
console.log('节流函数')
timerId = null //这里null了之后又可以等下次执行
},100)
}
在短时间内,多次执行会return出去,不执行。