首页 > 其他分享> > js（防抖和节流）

js（防抖和节流）

2021-11-27 10:04:49 作者：互联网

debounce 防抖

应用场景

搜索框搜索输入，只需用户最后一次输入完再发送请求
手机号、邮箱验证输入检测
窗口大小 resize，只需窗口调整完成后，计算窗口大小，防止重复渲染

言外之意就是防止事件一直触发执行；

<body>
    <div class="box"></div>

    <script>
        // 获取 盒子 
        var box = document.querySelector('.box')

        // 防抖
        function debounce(fn, wait) {
            //定义一个定时器
            var timer = null      
            return function () {
                if (timer !== null) {
                    //清除这个定时器
                    clearTimeout(timer)
                }
                timer = setTimeout(fn, wait)
            }
        }

        // 滚动事件
        box.addEventListener('scroll', debounce(scTop, 1000))

        // 处理函数
        function scTop() {
            console.log(box.scrollTop)
        }
    </script>
</body>

throttle 节流：

应用场景
1.滚动加载，加载更多或滚到底部监听
2.搜索框，搜索联想功能

言外之意就是防止事件一直触发执行；
指的是当持续触发事件时，每隔一定的时间，只执行一次函数，我自己理解为匀速执行

<script>
    // 获取 盒子 
    var box = document.querySelector('.box')

    // 节流
    function throttle(func, delay) {
        // 定义计时器
        var timer = null
        return function () {
            var args = arguments
            if (!timer) {
                timer = setTimeout(function () {
                    func.apply(this, args)
                    timer = null
                }, delay)
            }
        }
    }

    // 滚动事件
    box.addEventListener('scroll', throttle(scTop, 1000))

    // 处理函数
    function scTop() {
        console.log(box.scrollTop)
    }
</script>

防抖和节流相同点：

都可以通过 setTimeout 实现
都是降低执行频率，节省计算资源

防抖和节流不同点：
debounce 防抖是在一段连续操作结束后，执行函数，利用 setTimeout 和 clearTimeout 实现，throttle 节流是在一段连续操作中，每隔一段时间只执行一次，频率较高的事件中使用，用来提高性能。
debounce 防抖关注一定时间连续触发的事件，只在最后执行一次，而 throttle 节流一段时间内只执行一次

标签：box,function,防抖,节流,debounce,timer,js
来源： https://blog.csdn.net/weixin_41618917/article/details/121572771