<body>
<button id="btn1">点击1</button>
<button id="btn2">点击2</button>
</body>
1.防抖
高频触发一个事件,只在最后一次点击时执行事件
(触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。)
ex:
var btn=document.getElementById("btn1");
var timer=null;
btn.onclick=function(){
clearTimeout(timer);
timer=setTimeout(()=>{
console.log("点击")
},1000)
}
2.节流
高频触发一个事件,减少执行频率,不是不让执行
(高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。)
var btn2=document.getElementById("btn2");
var flag=true;
btn2.onclick=function(){
if(flag){
console.log("开闸放水了");
flag=false;
}
setTimeout(()=>{
flag=true;
},1000)
}