手写防抖和节流
# 防抖和节流
| 共同点 | 区别 | ||
|---|---|---|---|
| 防抖debounce | 在事件被频繁触发时 | 只执行最后一次 | input输入 |
| 节流throttle | 减少事件执行的次数 | 有规律的进行 | 拖拽，scroll |
# 防抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" name="input">
</body>
<script type="text/javascript">
var input = document.querySelector("input");
input.addEventListener("keyup", debounce(function() {
console.log(input.value + "取后台请求")
},1000))
function debounce(fn,delay){
let timer = null;
return function () {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.call(this,arguments);
timer = null;
},delay)
}
}
</script>
</html>
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
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
函数：
function debounce(fn,delay){
let timer = null;
return function () {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.call(this,arguments);
timer = null;
},delay)
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div draggable = "true"></div>
</body>
<script type="text/javascript">
var div = document.querySelector("div");
div.addEventListener("drag", throttle(function(e) {
console.log(e.clientX,e.clientY)
},500))
// 节流
function throttle(fn, delay) {
let timer = null;
return function() {
if(timer) return;
timer = setTimeout(() => {
fn.apply(this,arguments);
timer = null;
},delay)
}
}
</script>
</html>
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
31
32
33
34
35
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
31
32
33
34
35
函数：
// 节流
function throttle(fn, delay) {
let timer = null;
return function() {
if(timer) return;
timer = setTimeout(() => {
fn.apply(this,arguments);
timer = null;
},delay)
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# call()和apply()
不管是call 还是 apply 都改变了函数的 this 对象
参考文章：https://juejin.cn/post/6844904009308831751
编辑 (opens new window)
上次更新: 2024/12/19, 09:15:30