函数防抖&节流

  • 函数防抖: 防止事件在某一时刻频繁触发
  • 函数节流: 降低事件在一段长时间内频繁触发的次数

记录一下常见的几种写法

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
// 防抖 延迟执行 (事件触发后一定时间内不立刻执行)
const debounce = (func, wait, ...args) => {
let timeout;
return function(){
// 这里的绑定this是绑定的在addeventlistener时环境中的this
const context = this;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, ...args)
}, wait);
}
}

// 防抖 立即执行 (事件触发后立刻执行,但在一定时间内不再次执行)
const debounce1 = (func, wait, ...args) => {
let timeout;
return function(event){ // 这里给个e能够拿到事件信息
const context = this;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
},wait)

if (callNow) {
func.apply(context, ...args)
}
}
}

// 防抖 结合版 这个没进行实际测试
function debounceAll(func,wait,immediate) {
var timeout;

return function () {
var context = this;
var args = arguments;

if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}

// 节流 时间戳版
const throttle = (func, wait, ...args) => {
let pre = 0;
return function () {
const context = this;
let now = Date.now();
if (now - pre >= wait) {
func.apply(context, ...args);
pre = Date.now();
}
}
}

// 节流 定时器版
const throttle1 = (func, wait, ...args) => {
let timeout;
return function () {
const context = this;
if (!timeout) {
timeout = setTimeout(function(){
timeout = null;
func.apply(context, ...args);
}, wait)
}
}
}

// 调用
document.getElementById('button').addEventListener('click', throttle1(clickEvent, 1000))