关于节流的小知识

最新推荐文章于 2024-07-25 09:24:40 发布

郑SaScha

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量117

点赞数

分类专栏：写给自己看文章标签： javascript

本文链接：https://blog.csdn.net/m0_53493562/article/details/120636640

版权

写给自己看专栏收录该内容

5 篇文章 0 订阅

订阅专栏

节流

控制执行的次数

简单理解就是在一定的时间内同一个事件只能触发一次，只有超过这个时间才能再次触发。

监听鼠标滚动事件（不加节流）

    <style>
        body {
            height: 2000vh;
        }
    </style>
 <body>
    <script>
        window.onscroll = function () {
            console.log(1);
        }
    </script>
 </body>

效果演示：

在这里插入图片描述

监听鼠标滚动事件（简单加节流）

    <style>
        body {
            height: 2000vh;
        }
    </style>
 <body>
    <script>
        let flag = true;
        window.onscroll = function () {
            if (flag) {
                setTimeout(() => {
                    console.log('hahaha');
                    flag = true;
                }, 500)
            };
            flag = false;
        }
    </script>
 </body>

在这里插入图片描述

多了一个全局变量；
如果要添加业务逻辑就会有点乱。

封装节流函数

        function throttle(fn, delay) {
            let flag = true;
            return function () {
                if (flag) {
                    setTimeout(() => {
                        fn.call(this); // 重定向this的指向
                        flag = true;
                    }, delay)
                };
                flag = false;
            }
        }
        window.onscroll = throttle(function () {
            console.log('hahhaha'); // 请注意这里的this需要重定向
        }, 500)