性能优化之函数节流

Posted 2021-12-17

函数节流是另一种常见的优化高频率调用函数的手段，核心是把高频率调用的函数优化为按照某个时间频率来执行
函数节流与函数防抖动的区别在于：

函数防抖动是检测前后两次连续间隔内的函数调用，并将时间间隔内的多次调用合并为一次；

函数节流是将频繁的函数调用弱化为按照某个时间间隔来调用。

根据具体的实现方式可以分为两种，分别是定时器实现以及时间戳实现

定时器实现

当函数调用时，先检查是否已经存在定时器，如果存在则等待该定时器完成，否则生成一个新的定时器来处理。

根据这个想法，可以大致得到如下代码：

function throttleByTimer(cb, wait) 
    let timer = null;
    return function() 
        if(timer) return;
        timer = setTimeout(() => 
            cb.apply(this, arguments);
            timer = null;
        , wait);
    

时间戳实现

当函数调用时，用当前时间戳与上次执行完成的时间戳进行比较，当间隔在等待时间之内，则无视该次函数调用，否则执行回调并记录时间戳 。

function throttleByTimeStamp(cb, wait) 
    let preTimeStamp = +new Date();
    return function() 
        let nowTimeStamp = +new Date();
        if (nowTimeStamp - preTimeStamp < wait) return;
        cb.apply(this, arguments);
        preTimeStamp = nowTimeStamp;
    

对比两种方式可以发现，定时器的实现无法首次立即执行，而时间戳的实现虽然可以首次立即执行，但无法确保必定执行最后一次回调。而实际业务开发中，为了保证结果的正确性，往往需要确保最后一次回调的执行。

因此，可以优化一下，最终版如下

function throttle(cb, wait) 
    let preTimeStamp = 0;
    let timer = null;

    return function() 
        let nowTimeStamp = +new Date();
        let difTimeStamp = nowTimeStamp - preTimeStamp;

        if (difTimeStamp < wait) 
            if (timer) return;
            timer = setTimeout(() => 
                cb.apply(this, arguments);
                timer = null;
                preTimeStamp = +new Date();
            , wait - difTimeStamp);
            return;
        

        clearTimeout(timer);
        timer = null;

        cb.apply(this, arguments);
        preTimeStamp = nowTimeStamp;
    

使用方式：

timerPDom.onmousemove = throttle(move, 1000);

应用场景

mousemove、scroll等频繁触发的事件监听

滚动加载

其他会频繁调用的函数等

总结

函数节流的优化可以类比成一个水龙头从不断滴水改为每隔一个时间间隔滴一次水的过程，既可以收集到水也不会浪费水资源

定时器节流，由于定时器的特性，无法首次立即执行，但可以确保必定会执行最后一次

时间戳节流，可以首次立即执行，但无法确保会执行最后一次

这两种单一实现的方式各有缺陷，实际应用还需整合起来用

文章来自公众号：睿江云计算

睿江云官网链接：https://www.eflycloud.com/home?from=RJ0024