【JS】923- JS 节流函数 throttle 详解

喜欢ヅ旅行 2022-11-17 13:55 153阅读 0赞

![e4a60dd8e60f28ff80f0812032cb9a80.png][]

在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小（resize），浏览器页面滚动（scroll），鼠标移动（mousemove）。也就是说用户在触发这些浏览器操作的时候，如果脚本里面绑定了对应的事件处理方法，这个方法就不停的触发。

这并不是我们想要的，因为有的时候如果事件处理方法比较庞大，DOM 操作比如复杂，还不断的触发此类事件就会造成性能上的损失，导致用户体验下降（UI 反映慢、浏览器卡死等）。所以通常来讲我们会给相应事件添加延迟执行的逻辑。

通常来说我们用下面的代码来实现这个功能：

var COUNT = 0;
    function testFn() { console.log(COUNT++); }
    // 浏览器resize的时候
    // 1. 清除之前的计时器
    // 2. 添加一个计时器让真正的函数testFn延后100毫秒触发
    window.onresize = function () {
        var timer = null;
        clearTimeout(timer);
    
        timer = setTimeout(function() {
            testFn();
        }, 100);
    };

细心的同学会发现上面的代码其实是错误的，这是新手会犯的一个问题：setTimeout 函数返回值应该保存在一个相对全局变量里面，否则每次 resize 的时候都会产生一个新的计时器，这样就达不到我们发的效果了

于是我们修改了代码：

var timer = null;
    window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(function() {
            testFn();
        }, 100);
    };

这时候代码就正常了，但是又多了一个新问题 —— 产生了一个全局变量 timer。这是我们不想见到的，如果这个页面还有别的功能也叫 timer 不同的代码之前就是产生冲突。为了解决这个问题我们要用 JavaScript 的一个语言特性：闭包 closures 。相关知识读者可以去 MDN 中了解，改造后的代码如下：

/**
     * 函数节流方法
     * @param Function fn 延时调用函数
     * @param Number delay 延迟多长时间
     * @return Function 延迟执行的方法
     */
    var throttle = function (fn, delay) {
        var timer = null;
    
        return function () {
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn();
            }, delay);
        }
    };
    window.onresize = throttle(testFn, 200, 1000);

我们用一个闭包函数（throttle节流）把 timer 放在内部并且返回延时处理函数，这样以来 timer 变量对外是不可见的，但是内部延时函数触发时还可以访问到 timer 变量。

当然这种写法对于新手来说不好理解，我们可以变换一种写法来理解一下：

var throttle = function (fn, delay) {
        var timer = null;
    
        return function () {
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn();
            }, delay);
        }
    };
    
    var f = throttle(testFn, 200);
    window.onresize = function () {
        f();
    };

这里主要了解一点：throttle 被调用后返回的 function 才是真正的 onresize 触发时需要调用的函数

现在看起来这个方法已经接近完美了，然而实际使用中并非如此。举个例子：

> 如果用户 **不断的** resize 浏览器窗口大小，这时延迟处理函数一次都不会执行

于是我们又要添加一个功能：当用户触发 resize 的时候应该 **在某段时间** 内至少触发一次，既然是在某段时间内，那么这个判断条件就可以取当前的时间毫秒数，每次函数调用把当前的时间和上一次调用时间相减，然后判断差值如果大于 **某段时间** 就直接触发，否则还是走 timeout 的延迟逻辑。

下面的代码里面需要指出的是：

1.  previous 变量的作用和 timer 类似，都是记录上一次的标识，必须是相对的全局变量
2.  如果逻辑流程走的是“至少触发一次”的逻辑，那么函数调用完成需要把 previous 重置成当前时间，简单来说就是：相对于下一次的上一次其实就是当前

/**
     * 函数节流方法
     * @param Function fn 延时调用函数
     * @param Number delay 延迟多长时间
     * @param Number atleast 至少多长时间触发一次
     * @return Function 延迟执行的方法
     */
    var throttle = function (fn, delay, atleast) {
        var timer = null;
        var previous = null;
    
        return function () {
            var now = +new Date();
    
            if ( !previous ) previous = now;
    
            if ( now - previous > atleast ) {
                fn();
                // 重置上一次开始时间为本次结束时间
                previous = now;
            } else {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    fn();
                }, delay);
            }
        }
    };

实践：

我们模拟一个窗口 scroll 时节流的场景，也就是说当用户滚动页面向下的时候我们需要节流执行一些方法，比如：计算 DOM 位置等需要连续操作 DOM 元素的动作

完整代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>throttle</title>
    </head>
    <body>
        <div style="height:5000px">
            <div id="demo" style="position:fixed;"></div>
        </div>
        <script>
        var COUNT = 0, demo = document.getElementById('demo');
        function testFn() {demo.innerHTML += 'testFN 被调用了 ' + ++COUNT + '次<br>';}
    
        var throttle = function (fn, delay, atleast) {
            var timer = null;
            var previous = null;
    
            return function () {
                var now = +new Date();
    
                if ( !previous ) previous = now;
                if ( atleast && now - previous > atleast ) {
                    fn();
                    // 重置上一次开始时间为本次结束时间
                    previous = now;
                    clearTimeout(timer);
                } else {
                    clearTimeout(timer);
                    timer = setTimeout(function() {
                        fn();
                        previous = null;
                    }, delay);
                }
            }
        };
        window.onscroll = throttle(testFn, 200);
        // window.onscroll = throttle(testFn, 500, 1000);
        </script>
    </body>
    </html>

我们用两个 case 来测试效果，分别是添加至少触发 atleast 参数和不添加：

// case 1
    window.onscroll = throttle(testFn, 200);
    // case 2
    window.onscroll = throttle(testFn, 200, 500);

**case 1** 的表现为：在页面滚动的过程（不能停止）中 testFN 不会被调用，直到停止的时候会调用一次，也就是说执行的是 throttle 里面 **最后** 一个 setTimeout ，效果如图（查看原 gif 图）：

![013fa832a633c70d4b0ba3118e109243.gif][]

**case 2** 的表现为：在页面滚动的过程（不能停止）中 testFN 第一次会延迟 500ms 执行（来自至少延迟逻辑），后来至少每隔 500ms 执行一次，效果如图

![f64140a61807dc37890067ccaf7b8f5b.gif][]

至此为止，我们想要实现的效果已经基本完成。后续的一些辅助性优化读者可以自己琢磨，如：函数 this 指向，返回值保存等。

*  本文作者：keelii
 *  本文链接：https://keelii.com/2016/06/11/javascript-throttle/

![6d846630c4ff0343af96add88458261a.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![4eb575683406e81c34cb6eb82be307e9.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[e4a60dd8e60f28ff80f0812032cb9a80.png]: /images/20221022/31c5707e05ab48548e4b45359a1f72cc.png
[013fa832a633c70d4b0ba3118e109243.gif]: /images/20221022/491b00e02a554600bac82512e90081e3.png
[f64140a61807dc37890067ccaf7b8f5b.gif]: /images/20221022/da16beca5fae4d3b9c1bf6d5cf151b87.png
[6d846630c4ff0343af96add88458261a.gif]: /images/20221022/fad2d259e1a547ae890b0ccbfdb61ec1.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[4eb575683406e81c34cb6eb82be307e9.gif]: /images/20221022/85a17ee5e02640dd8358a50d13d525e8.png