防抖和节流实例运用

相信有很多小伙伴在工作中遇到过这样一种情况，例如表单封装，用户填好数据后页面上有一个保存或是提交按钮，在网络不好的情境下或是用户点了保存提交，页面没有效果或是反应慢了；用户操作的时候就可能一直反复点击，这就会导致很多不必要的方法调用。

接下来博主分享的案例就可以很好的处理掉这个情境的问题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防抖、节流</title>
</head>
<style>
    .fd {
        height: 150px;
        width: 150px;
        line-height: 150px;
        text-align: center;
        color: #fff;
        background-color: #FFC0CB;
        font-size: 80px;
    }

    .jl {
        margin-top: 20px;
        height: 150px;
        width: 150px;
        line-height: 150px;
        text-align: center;
        color: #fff;
        background-color: #FFC0CB;
        font-size: 80px;
    }

    /*
    防抖和节流的作用都是防止函数多次调用。
    区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，
    防抖的情况下只会调用一次，
    而节流的 情况会每隔一定时间（参数wait）调用函数。
    */
</style>

<body>

    <!-- 这里是防抖 -->
    <div id="content" class="fd"></div>
    <script>
        let content = document.getElementById('content')
        let num = 1

        function count() {
            content.innerHTML = num++
        }

        function debounce(nums, awit, immediate) {
            let timer
            return function () {
                if (timer) clearTimeout(timer)
                if (immediate) {
                    let callnow = !timer
                    timer = setTimeout(() => {
                        timer = null
                    }, awit)
                    if (callnow) nums.apply(this, arguments)
                } else {
                    timer = setTimeout(() => {
                        nums.apply(this, arguments)
                    }, awit)
                }
            }
        }
        // content.onmousemove = debounce(count ,1000,true)
        content.addEventListener('click', debounce(count, 1000, true))
    </script>

    <!-- 这里是节流 -->
    <div id="box" class="jl"></div>
    <script>
        let box = document.getElementById('box')
        let sum = 1

        function summer() {
            box.innerHTML = sum++
        }

        function throttle(nums, awit, immediate) {
            let timer
            let temper = true
            return function () {
                if (!temper) return
                temper = false
                if (immediate) {
                    let rightnow = !timer
                    timer = setTimeout(() => {
                        temper = true
                        timer = null
                    }, awit)
                    if (rightnow) {
                        nums.apply(this, arguments)
                    }
                } else {
                    timer = setTimeout(() => {
                        nums.apply(this, arguments)
                        temper = true
                    }, awit)
                }

            }
        }
        box.addEventListener('click', throttle(summer, 1000, true))
    </script>

</body>

</html>

如果不是很懂防抖和节流是什么意思的小伙伴建议百度了解一下；或者参考一下博主在代码段里面写的注释。创造不易，如果觉得有用的小伙伴请帮博主点赞收藏一下，博主会非常感谢你的助力！

还有一个多月就要过年了，今年在疫情的影响下整个行业都不是很景气，尤其更是在大厂还在疯狂裁员的情况下更是学上加霜，但学前端的小伙伴们不要因此而气馁，前端市场依然还在，所以今年年底我们就踏踏实实的蓄力；来年一定能够打一场漂亮的开端。我们一起加油！

在这里祝愿所有点过这篇帖子的老铁们；心想事成、万事如意、鹏程万里。

防抖和节流实例运用

猜你喜欢