1. 防抖
持续触发事件时,在一定时间内没有再触发事件,才执行该事件。假设一个按钮,点一下它就一激灵一下,为了不让它过度惊吓(防止它不断抖动),规定只能2秒内不发生点击事件,才触发该事件。
思路:设置一个定时器,规定时间内触发l了该事件就重新开始计时。
tip:不清楚怎么写时,先把它的用法写出来。
element.addEventListener('click', debounce(() => console.log('debounce~'), 2000);
function debounce(handle, time){
let timer; // 定时器
return function(){
// 执行到这表示点击了,需要清除定时器并重新开始
clearTimeout(timer);
timer = setTimeout(() => {
// 执行到这里表示time时间内无事发生
handle();
}, time)
}
}
2. 节流
持续触发事件时,在一定时间内只执行一次。之所以称之为节流是因为把它比喻成了自来水龙头,我们需要的效果是一滴一滴的有规律的自来水。
思路:设置一个锁,每隔一定时间把锁打开(lock = false),只有锁打开时,函数才能执行。
element.addEventListener('click', throttle(() => console.log('throttle~'), 2000);
function throttle(handle, time){
let lock = false;
return function(){
if(lock){
return;
}
handle();
lock = true;
setTimeout(() => {
// 如果处理函数写在这里,表示每段时间的末尾执行该函数
// handle();
lock = false;
}, time)
}
}