防抖和节流
防抖
频繁触发某个操作时,只执行最后一次。当持续触发一个事件时,在一定时间内,事件没有再触发,才执行回调函数。如果又触发了时间,就重新计时。
类比坐电梯,如果电梯门快要关闭,有一个人要进电梯,电梯门会重新开始计时关闭。没有人在坐就关闭电梯,电梯运行(看其他小伙伴们说到的坐电梯,这个例子真的很清晰
防抖原理
<body>
<button>防抖原理</button>
<script src="./lodash.min.js"></script>
<script>
let btn=document.querySelector('button')
//lodash实现-防抖
btn.addEventListener('click',debounce(function(){
console.log(2);
},500))
//3 防抖原理
let timer;
btn.addEventListener('click',function(){
//执行当前这个定时器之前,先清除掉之前的定时器
clearTimeout(timer)
//定时器执行某串代码,单位事件内多次触发,取消上一次的定时器
timer=setTimeout(()=>{
console.log(3);
},500)
})
</script>
</body>
节流
单位时间内,频繁触发同一个操作,只会触发一次。不管事件触发有多频繁,都会保证在设定事件内执行一次回调函数
节流原理
<body>
<button>节流原理</button>
<script>
//点击按钮,输出1
let btn=document.querySelector('button')
//2 lodash绑定-节流
btn.addEventListener('click',function(){
console.log(2);
},1500)
//3 节流原理
let startTime=0
btn.addEventListener('click',function(){
// 获取当前时间
let nowTime=Date.now()
// 如果间隔时间超过1500就触发某个逻辑
if(nowTime-startTime>1500){
console.log(3);
//修改上一次的触发时间
startTime=nowTime
}
})
//节流原理
let bool = false; // 控制器
btn.addEventListener('click', function () {
// 判断,要不要开启一个新的延时器
if (bool) {
return;
}
console.log(4);
bool = true; // 设置为true,这样再点击就没法执行定时器了
setTimeout(function () {
// 1500后,回复点击效果
bool = false;
}, 1500);
});
</script>
</body>