Wuxh

Front-end Development

0%

手写防抖和节流

记录手写防抖和节流

防抖(debounce)

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次;
如果设定的时间到来之前,又一次触发了事件,就重新开始延时;

1
2
3
4
5
6
7
8
9
10
const debounce = (fn, t) => {
let time;
return function (...arg) {
clearTimeout(time);
let that = this;
time = setTimeout(function (...arg) {
fn.apply(that, arg);
}, t);
};
};

节流(throttle)

当持续触发事件时,保证一定时间段内只调用一次事件处理函数;

1
2
3
4
5
6
7
8
9
const throttle = (fn, t) => {
let now = Date.now();
return function (...arg) {
if (Date.now() - now > t) {
fn.apply(this, arg);
now = Date.now();
}
};
};