防抖，即为防止抖动，避免将一次事件误认为多次。
意思是当你提出多次事件请求时，只会响应最近一次的请求。
以点击按钮实现1s后盒子宽度增大的效果为例，当我们不停点击按钮时，只会执行最后一次请求：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!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后盒子宽度增大的效果为例，当我们在请求执行的时间范围内不停点击按钮时，只会执行最开始提出的那次请求：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!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。
