理解防抖和节流

防抖

概念

相邻的两次函数执行间隔不得小于n秒,否则重新计时

实现

在每次函数执行之前先清空上一次设置的定时器,原因是:如果执行间隔大于n秒,那么先前的定时任务一定已经执行完毕,当执行clearTimeout时其实并没有定时器可清除;否则定时器就会被清除,然后重新计时

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function debounce(fn, wait, immediate) {
var timer = null;
return function() {
var context = this;
var args = arguments;

// 判断首次是否需要立即执行
if (immediate) {
fn.call(context, ...args);
immediate = false;
}

// 清除定时器
clearTimeout(timer);
timer = setTimeout(function() {
fn.call(context, ...args);
}, wait);
};
}

节流

概念

n秒内函数只能被执行一次

实现

在每次函数执行之前先判断是否存在定时器,存在则跳过本次执行,否则设置新的定时器

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function throttle(fn, wait, immediate) {
var timer = null;
return function() {
var context = this;
var args = arguments;

// 判断首次是否需要立即执行
if (immediate) {
fn.call(context, ...args);
immediate = false;
}

// 如果当前存在定时器,返回;否则设置定时器
if (timer) return;

timer = setTimeout(function() {
fn.call(context, ...args);
// 函数执行完毕后,清除定时器
clearTimeout(timer);
timer = null;
}, wait);
};
}