函数防抖和函数节流

Posted by weite122 on 2020-08-25

函数防抖

  • 事件触发n秒后执行回调,如果n秒内再次触发,重新计时。
  • 应用场景: ajax提交,下拉刷新
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
function debounce(fn, delay, triggerNow) {
let t = null,
res;

const debounced = function () {
let _self = this,
args = arguments;

if (t) {
clearTimeout(t);
}

if (triggerNow) {
let exec = !t;
t = setTimeout(function () {
t = null;
}, delay);
if (exec) {
res = fn.apply(_self, args);
}
} else {
t = setTimeout(function () {
res = fn.apply(_self, args);
}, delay);
}
return res;
};

debounced.remove = function () {
clearTimeout(t);
t = null;
};
return debounced;
}

函数节流

  • 事件被触发,n秒之内只执行一次事件
  • 应用场景: input 验证输入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function throttle(fn, delay) {
let t = null,
begin = new Date().getTime();
return function () {
var _self = this,
args = arguments,
cur = new Date().getTime();
clearTimeout(t);

if (cur - begin >= delay) {
fn.apply(_self, args);
begin = cur;
} else {
t = setTimeout(function () {
fn.apply(_self, args);
}, delay);
}
}
}