防抖
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始计时
function debounce(fn, delay) {
let timer = null;
return function(){if(timer) {clearTimeout(timer);
}
timer = setTimeout(() => {fn.apply(this, arguments);
}, delay);
};
}
节流
当持续触发事件时,保证在一定时间内只调用一次事件处理函数
function throttle(fn, delay) {
let timer = null;
return function() {if(!timer) {timer = setTimeout(() => {fn.apply(this, arguments);
timer = null;
}, delay)
}
};
}
应用
debounce
- search 搜索联想,用户在不断输入值时,用防抖来节约请求资源。
- 频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器
throttle
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)
- window 触发 resize 的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次