函数防抖

发表于 | 分类于

函数防抖(debounce)是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

函数防抖

当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间

1
2
3
window.onscroll = function () {
    console.log('hello world');
};

在窗口滚动过程中会连续打印出很多的 hello world

防抖函数

1
2
3
4
5
6
7
8
9
const debounce = (fn, wait = 0) => {
    let inDebounce;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => fn.apply(context, args), wait);
    };
};
1
2
3
4
5
6
window.addEventListener(
    'scroll',
    debounce(function() {
        console.log('hello world');
    }, 250)
)

在窗口滚动后 250ms 后执行 console.log('hello world')