有关防抖节流的简单实现
- 防抖
- 节流
防抖，即为防止抖动，避免将一次事件误认为多次。
意思是当你提出多次事件请求时，只会响应最近一次的请求。
以点击按钮实现1s后盒子宽度增大的效果为例，当我们不停点击按钮时，只会执行最后一次请求：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn1">防抖</button>
<div id="box1"></div>
<script>
let btn1=document.getElementById("btn1")
let box1=document.getElementById("box1")
let timer1;
btn1.onclick=function(){
if(timer1){
clearTimeout(timer1);
}
timer1=setTimeout(()=>{
let num=box1.offsetWidth;
box1.style.width=num 20 "px";
},1000)
}
</script>
</body>
</html>其实可以看出，防抖重在清零，当timer不为null或undefined时提出请求，就clear掉timer，再生成一个timer。
节流，即为节省流量，对提出的请求进行限流。
意思是当你在请求执行的时间范围内提出多次请求时，只会响应最开始提出的请求。
以点击按钮实现1s后盒子宽度增大的效果为例，当我们在请求执行的时间范围内不停点击按钮时，只会执行最开始提出的那次请求：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn2">节流</button>
<div id="box2"></div>
<script>
let btn2=document.getElementById("btn2")
let box2=document.getElementById("box2")
let timer2;
btn2.onclick=function(){
if(!timer2){
timer2=setTimeout(()=>{
timer2=null;
let num=box2.offsetWidth;
box2.style.width=num 20 "px";
},1000)
}
}
</script>
</body>
</html>可以看出，节流重在加锁，当timer不为空或undefined时，就不产生任何动作，当该请求执行结束后，将timer设置为null。
