共同的一点是两者都用了闭包,即return函数内部使用外部函数的方式。
防抖是每次都执行函数,使用清除每次的执行,最后一次执行函数。
节流是定义一个布尔变量通过变量的状态的是否改变只执行一次函数。
防抖:
functiondebounce(fn,wait) {
vartimeout =null;// 创建一个标记用来存放定时器的返回值
returnfunction() {
clearTimeout(timeout);//清除定时器
//创建新的 setTimeout
timeout =setTimeout(function(){
fn();
}, wait);
};
}
// 处理函数
functionhandle() {
console.log(document.getElementById("kw").value);
}
//输入框事件
document.getElementById("kw").addEventListener('input',debounce(handle,5000));
节流:
functionthrottle(fn,delay){
varcanRun=true;//通过闭包保存该变量
returnfunction(){
if(!canRun)return;//立刻返回
canRun=false;
setTimeout(function(){
fn();
canRun=true;
},delay);
};
}
functionhandle(){
console.log(123);
}
window.addEventListener("scroll",throttle(handle,2000));