什么是函数节流?
函数节流是指一定时间内js方法只执行一次,
以点击事件为例,在一定时间内不管触发多少次点击事件都只会执行一次
为什么需要函数防抖?
为了减少一些时间的频繁调用,例如scroll(懒加载要记录滚动条的位置)、mousemove(鼠标移动)等等
看效果
下面是简单的样式便于观察
.div{
width: 200px;
height: 200px;
color: red;
font-size: 40px;
font-weight: 700;
margin: 30px auto;
text-align: center;
line-height: 200px;
background-color: burlywood;
}
<body>
<div class="div">1</div>
</body>
这是js
原理是第一次点击的时候就给事件“上锁”但是同时触发事件,
当不点击或者在设定时间范围外点击时就会”解锁“,
然后重复之前的作用,”上锁“的同时并触发事件
var num=document.querySelector("div")
nums=parseInt(num.innerHTML)
pan=true;
var jieliu;
num.onclick=function(){
if(pan){
pan=false;
jieliu=setTimeout(function(){
nums++;
num.innerHTML=nums;
pan=true;
},1000)
}
}