-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
80 lines (73 loc) · 1.89 KB
/
index.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
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>debounce</title>
<style>
#container{
width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var count = 1;
var container = document.getElementById('container');
function getUserAction(e) {
container.innerHTML = count++;
};
//函数防抖，多次请求合并到最后一次执行
function debounce(func,wait,immediate){
var timeout,result
return function (){
var context = this//解决this 指向
var argus = arguments//解决event 对象
if(timeout) clearTimeout(timeout)//把之前加入时间队列的定时器清空，重新开始计算
if(immediate){
//如果已经执行过，不再执行
var callNow = !timeout
timeout=setTimeout(()=>{
timeout = null
},wait)
if(callNow) result= func.apply(context,argus)
}else{
timeout=setTimeout(()=>{
func.apply(context,argus)
},wait)
}
return result
}
}
//函数节流,时间戳和定时器
// function throttle(func,wait){
// var context,argus;
// var previous = 0
// return function (){
// var now = +new Date()
// context = this;
// argus = arguments
// if(now-previous>wait){
// func.apply(context,argus)
// previous = now
// }
// }
// }
function throttle(func,wait){
var context,argus,timeout;
return function (){
context = this;
argus = arguments
if(!timeout){
timeout = setTimeout(()=>{
timeout = null
func.apply(context,argus)
},wait)
}
}
}
container.onmousemove = throttle(getUserAction,1000);
</script>
</body>
</html>