-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path03-给返回顶部做防抖效果.html
84 lines (75 loc) · 2.69 KB
/
03-给返回顶部做防抖效果.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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!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>
body {
height: 6000px;
}
.up {
width: 50px;
height: 50px;
border: 1px solid blue;
text-align: center;
line-height: 50px;
border-radius: 50%;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
</style>
</head>
<body>
<!-- 返回顶部 -->
<div class="up">↑</div>
<script>
//1.获取 dom
var oUp = document.querySelector('.up');
//2.给window 绑定 滚动事件
// window.onscroll = function () {
// //3.获取滚动后离顶部的距离
// var top = document.documentElement.scrollTop;
// console.log(top);
// //4.当滚动距离超过200px的时候，显示 小按钮
// if (top >= 200) {
// oUp.style.display = "block";
// } else {
// oUp.style.display = "none";
// }
// }
//给滚动事件绑定 函数,使用了防抖 ,会减少执行很多次的 scroll
window.onscroll = debounce(goup, 200);
// window.onscroll = goup;
function goup() {
var top = document.documentElement.scrollTop;
console.log(top);
//4.当滚动距离超过200px的时候，显示 小按钮
if (top >= 200) {
oUp.style.display = "block";
} else {
oUp.style.display = "none";
}
}
//滚动条事件 会持续触发，需要使用 防抖来优化性能
//封装防抖函数
//参数1：回调函数 ；参数2 ：延时时间 是毫秒数 ，
function debounce(fn, delay) {
var timer = null;//设置了定时器的初始值
return function () {//使用了闭包
if (timer) {//判定定时器是否存在，如果存在将原来的定时器清除，生成新的定时器
clearTimeout(timer);
timer = setTimeout(fn, delay);
} else {
timer = setTimeout(fn, delay);
}
}
}
//思考:200ms 内持续不断的触发这个事件，会导致函数没有办法执行到
//希望设计一个开关一样的东西，让某个函数执行一次后，在某段时间内是失效的，过了这段时间再开始激活， 节流
</script>
</body>
</html>