防抖（throttle）和节流（debounce）Demo

最新推荐文章于 2022-12-06 10:16:27 发布

z...Z

最新推荐文章于 2022-12-06 10:16:27 发布

阅读量197

点赞数

分类专栏： JS学习

本文链接：https://blog.csdn.net/weixin_43706763/article/details/119581958

版权

JS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

解决性能问题，以后会常遇到
防抖 throttle 对于短时间内多次触发事件的情况，可以用防抖停止时间持续触发！

   // 防抖  滚轮滚动事件触发案例
        let timer = null;
        window.onscroll = function () {
            if (timer !== null) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                console.log("hello world!");	//-->业务代码
                timer = null;
            }, 500)
        }

节流 debounce 防止短时间内多次触发事件，在间隔时间内，还是需要不断触发！

  //节流	滚轮滚动事件触发案例
        let mark = true;
        window.onscroll = function () {
            if (mark) {
                setTimeout(() => {
                    console.log("hello world!");
                    mark = true;
                }, 500)
            }
            mark = false;
        }

返回顶部效果：

<body>
    <h1>返回页面顶部Demo</h1>
    <button>⬆</button>
</body>
<script>

    let btn = document.querySelector("button");
    btn.onclick = function () {
        window.scrollTo(0, 0);
    }

    // let timer = null;
    // window.onscroll = function () {
    //     if (timer !== null) {
    //         clearTimeout(timer);

    //     }
    //     timer = setTimeout(() => {
    //         console.log("计数器");
    //         // 业务功能按钮，显示 button样式！
    //         if (document.documentElement.scrollTop > 100) {
    //             btn.style.display = "block";
    //         } else {
    //             btn.style.display = "none";
    //         }

    //         timer = null;
    //     }, 500)
    // }
    // 利用闭包封装算法
    //节流
    function throttle(fn) {
        let mark = true;
        return function () {
            if (mark) {
                setTimeout(() => {
                    fn();
                    mark = true;
                }, 500)
            }
            mark = false;
        }
    }

// 防抖
    function debounce(fn) {
        let timer = null;
        function eventFun() {

            if (timer !== null) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                //业务代码。
                fn();
                timer = null;
            }, 500)
        }
        return eventFun;
    }
    window.onscroll = debounce(() => {
        console.log("计数器");
        // 业务功能按钮，显示 button样式！
        if (document.documentElement.scrollTop > 100) {
            btn.style.display = "block";
        } else {
            btn.style.display = "none";
        };
    });
</script>

学习自检！