防抖与节流的理解

防抖与节流的使用都是为了减轻服务器的压力。

防抖概念

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

简单理解就是连续多次点击一个链接，最终只执行最后一次的点击，之前的点击都取消了。

节流概念

让一个函数无法在很短的时间间隔内连续调用，当上一次执行完之后过了规定的时间间隔，才能进行下一次的函数调用。

简单理解就是点击一次链接后，再次点击就会无效，隔几秒后点击才会有效。

防抖与节流例子

防抖：

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。