防抖和节流都是为避免频繁触发,优化性能的方法。
以下方法都用到了闭包(内部函数能够访问到外部函数定义的变量)
不同的是,
防抖是将连续触发变为最后一次触发执行,例如搜索框实时搜索,提交数据的按钮等
//普通版本
function debounce(fn, wait){
var timeout = null
return function(){
if(timeout){
clearTimeout(timeout)
}
timeout = setTimeout(fn,wait)
}
//
var delay = debounce(submitFn,1000) //使用时用
// 进阶版 执行方法可以传参(使用apply改变this并接收参数)
const debounce = (fn:any,wait=1000)=>{
let timeout = null;
return function(...args){
const self = this;
if(timeout){
clearTimeout(timeout);
}
timeout = setTimeout(()=>{
fn.apply(self, args)
}, wait);
}
}
var delay = debounce(submitFn,1000);
//此时使用delay时传参就能为submitFn方法传参,
//用法为
const content = document.getElementById('content');
content.onclick = delay(123);
function submitFn(count) {
console.log(count)
};
节流是将连续触发变为隔一段时间执行,例如监听滚动条,鼠标移动等连续触发的事件
function throttle(fn, wait){
let timer = null;
return function(...args){
const self = this;
if(!timer){
setTimeout(()=>{
fn.apply(self,args);
timer = null;
},wait);
}
}