js防抖和节流的区别以及代码实列

128 阅读 0 评论 85 点赞

我是靠谱客的博主单薄饼干，这篇文章主要介绍js防抖和节流的区别以及代码实列，现在分享给大家，希望可以做个参考。

节流：规定时间内，只触发一次。

复制代码

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
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3 {
height: 400px;
}
</style>
</head>
<body>
<h3>hah</h3>
<h3>hah</h3>
<h3>hah</h3>
<h3>hah</h3>
<h3>hah</h3>
<script>
function jieliu(fun, delay) { //节流：规定时间内只运行一次
var temp = true; //判断后面定时器是否运行的关键索引
return function () {
if (!temp) { //if语句的意义：如果temp为false，则取消在定时器延迟时间内再次触发所引发的函数运行
return false; //跳出程序
}
temp = false; //若前面的if语句没有运行，则运行这个，防止定时器延迟时间内再次触发所引发的函数运行，和if语句相呼应
setTimeout(function () {
//定时器
fun();
temp = true; //定时器运行完成后，要将之前temp=false改成true，方便下一个定时器运行
}, delay);
}
}
window.onscroll = jieliu(getscroll, 1000);//第一个参数函数名不加（），滚动事件
function getscroll() { //打印网页向下滚动距离的函数
var sn = document.documentElement.scrollTop;
console.log(sn);
}
</script>
</body>
</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
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3 {
height: 400px;
}
</style>
</head>
<body>
<h3>hah</h3>
<h3>hah</h3>
<h3>hah</h3>
<h3>hah</h3>
<h3>hah</h3>
<script>
function fangdou(fun, delay) {//防抖
var fun1 = null;//创建一个标记存放定时器返回值
return function () {
if (fun1) {//这个if是防抖的关键
clearTimeout(fun1);//每当用户触发事件，把前一个定时器清除掉
}
fun1 = setTimeout(fun, delay);//再建一个新的定时器
}
}
window.onscroll = fangdou(getscroll, 200);//不加括号
function getscroll() {
var temp = document.documentElement.scrollTop;
console.log(temp);
}
</script>
</body>
</html>