防抖与节流的使用都是为了减轻服务器的压力。
防抖概念
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
简单理解就是连续多次点击一个链接,最终只执行最后一次的点击,之前的点击都取消了。
节流概念
让一个函数无法在很短的时间间隔内连续调用,当上一次执行完之后过了规定的时间间隔,才能进行下一次的函数调用。
简单理解就是点击一次链接后,再次点击就会无效,隔几秒后点击才会有效。
防抖与节流例子
防抖:
let btn=document.getElementsByTagName('button')[0];
let timeout;
btn.onclick=()=>{
clearTimeout(timeout);
timeout=setTimeout(()=>{
console.log("ADD");//需要执行的代码
},2000);
}
点击button按钮后会清除上一个计时器,隔两秒后再执行需要执行的代码;在点击后的两秒内点击,就会取消上一个需要执行的代码。到最后只会执行最后一次的点击。
节流:
let btn=document.getElementsByTagName('button')[0];
let bol=true;
btn.onclick=()=>{
if(bol){
console.log("ADD");//需要执行的代码
bol=false;
}else{
return ;
}
setTimeout(()=>{
bol=true;
},2000)
}
点击button后将bol的值变为false,两秒后再变为true;在点击button后的两秒内再点击button时,bol的值为false,bol为false就执行return;两秒后bol再变为true。