手写节流防抖函数

因为整体并不复杂,直接上代码理解就可以了。

节流(throttle)

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
// 节流就是「技能冷却中」
const throttle1 = (fn, time) => {
let flag = false;
return (...args) => {
if (flag) return;
fn.call(undefined, ...args);
flag = true;
setTimeout(() => {
flag = false;
}, time);
};
};
// 还有一个版本是 在冷却结束时调用 fn
// 简洁版,删掉冷却中变量,直接使用 timer 代替
const throttle2 = (fn, time) => {
let timer = null;
return (...args) => {
if (timer) {
return;
}
fn.call(undefined, ...args);
timer = setTimeout(() => {
timer = null;
}, time);
};
};

防抖(debounce)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 防抖就是「回城被打断」
const debounce = (fn, time) => {
let timer = null;
return (...args) => {
if (timer !== null) {
clearTimeout(timer); // 打断回城
}
// 重新回城
timer = setTimeout(() => {
fn.call(undefined, ...args); // 回城后调用 fn
timer = null;
}, time);
};
};

如需立即执行再加一个参数即可。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!