阅读 2198

前端性能优化之防抖-debounce

这周接到一个需求-给输入框做模糊匹配。这还不简单,监听input事件,取到输入值去调接口不就行了? 然而后端小哥说不行,这个接口的数据量非常大,这种方式调用接口的频率太高,而且用户输入时调用根本没有必要,只要在用户停止输入的那一刻切调接口就行了。 唉?这个场景听起来怎么这么像防抖呢?

那到底什么是防抖呢? 大家一定见过那种左右两边中间放广告位的网站,在网页滚动时,广告位要保持在屏幕中间,就要不断地去计算位置,如果不做限制,在视觉上广告位就像在“抖”。防止这种情况,就叫防抖了!

防抖的原理是什么? 我一直觉得网上流传的例子非常形象:当我们在乘电梯时,如果这时有人过来,我们会出于礼貌一直按着开门按钮等待,等到这人进电梯了,刚准备关门时,发现又有人过来了!我们又要重复之前的操作,如果电梯空间无限大的话,我们就要一直等待了。。。当然人的耐心是有限的!所以我们规定了一个时间,比如10秒,如果10秒都没人来的话,就关电梯门。

用专业术语概括就是:在一定时间间隔内函数被触发多次,但只执行最后一次。

最简易版的代码实现:

function debounce(fn, delay) {
    let timer = null;

    return function() {
        const context = this;
        const args = arguments;

        if (timer) {
            clearTimeout(timer);
            timer = null;
        }

        timer = setTimeout(() => {
            fn.apply(context, args);
        }, delay);
    };
}
复制代码

fn是要进行防抖的函数,delay是设定的延时,debounce返回一个匿名函数,形成闭包,内部维护了一个私有变量timer。我们一直会触发的是这个返回的匿名函数,定时器会返回一个Id值赋给timer,如果在delay时间间隔内,匿名函数再次被触发,定时器都会被清除,然后重新开始计时。

当然简易版肯定不能满足日常的需求,比如可能需要第一次立即执行的,所以要稍做改动:

function debounce(fn, delay, immediate) {
    let timer = null;

    return function() {
        const context = this;
        const args = arguments;

        timer && clearTimeout(timer);

        if(immediate) {
            const doNow = !timer;

            timer = setTimeout(() => {
                timer = null;
            }, delay);

            doNow && fn.apply(context, args);
        }
        else {
            timer = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    };
}
复制代码

比起简易版,多了个参数immediate来区分是否需要立即执行。其它与简易版几乎一致的逻辑,除了判断立即执行的地方:

const doNow = !timer;

timer = setTimeout(() => {
    timer = null;
}, delay);

doNow && fn.apply(context, args);
复制代码

doNow变量的值为!timer,只有!timer为true的情况下,才会执行fn函数。第一次执行时,timer的初始值为null,所以会立即执行fn。接下来非第一次执行的情况下,等待delay时间后才能再次触发执行fn。 注意!与简易版的区别,简易版是一定时间多次内触发,执行最后一次。而立即执行版是不会执行最后一次的,需要再次触发。

防抖的函数可能是有返回值,我们也要做兼容:

function debounce(fn, delay, immediate) {
    let timer = null;

    return function() {
        const context = this;
        const args = arguments;
        let result = undefined;

        timer && clearTimeout(timer);

        if (immediate) {
            const doNow = !timer;

            timer = setTimeout(() => {
                timer = null;
            }, delay);
            
            if (doNow) {
                result = fn.apply(context, args);
            } 
        }
        else {
            timer = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }

        return result;
    };
}
复制代码

但是这个实现方式有个缺点,因为除了第一次立即执行,其它情况都是在定时器中执行的,也就是异步执行,返回值会是undefined。

考虑到异步,我们也可以返回Promise:

function debounce(fn, delay, immediate) {
    let timer = null;

    return function() {
        const context = this;
        const args = arguments;

        return new Promise((resolve, reject) => {
            timer && clearTimeout(timer);

            if (immediate) {
                const doNow = !timer;

                timer = setTimeout(() => {
                    timer = null;
                }, delay);

                doNow && resolve(fn.apply(context, args));
            }
            else {
                timer = setTimeout(() => {
                    resolve(fn.apply(context, args));
                }, delay);
            }
        });
    };
}
复制代码

如此,只要fn被执行,那必定可以拿到返回值!这也是防抖的终极版了!

下次聊聊防抖的兄弟-前端性能优化之节流-throttle

关注下面的标签,发现更多相似文章
评论