页面防抖函数

最新推荐文章于 2024-08-08 15:58:10 发布

wenxin_liu

最新推荐文章于 2024-08-08 15:58:10 发布

阅读量540

点赞数

本文链接：https://blog.csdn.net/wenxin_liu/article/details/107304795

版权

防抖（debounce）是一种优化技术，用于在事件频繁触发时，保证函数仅在最后一次触发后的一段时间内执行。常见应用场景包括输入框查询请求的优化和窗口resize、scroll事件的处理。例如，在用户连续输入时，防抖能确保只有在输入停止后的最后状态才执行查询请求，减少不必要的网络请求，节省资源。

摘要由CSDN通过智能技术生成

防抖（debounce）

什么是防抖？

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

应用场景

(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；
(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；
还是上述列子，这里加入防抖来优化一下，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加入防抖</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log('ajax request ' + content)
            }
            function debounce(fun, delay) {
                return function (args) {
                    //获取函数的作用域和变量
                    let that = this
                    let _args = args
                    //每次事件被触发，都会清除当前的timeer，然后重写设置超时调用
                    clearTimeout(fun.id)
                    fun.id = setTimeout(function () {
                        fun.call(that, _args)
                    }, delay)
                }
            }
            let inputDebounce = document.getElementById('debounce')
            let debounceAjax = debounce(ajax, 500)
            inputDebounce.addEventListener('keyup', function (e) {
                debounceAjax(e.target.value)
            })
        }
    </script>
</head>

<body>
    <div>
        2.加入防抖后的输入：
        <input type="text" name="debounce" id="debounce">
    </div>
</body>

</html>

1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；
2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；
显示效果：
加入防抖后，当持续在输入框里输入时，并不会发送请求，只有当在指定时间间隔内没有再输入时，才会发送请求。如果先停止输入，但是在指定间隔内又输入，会重新触发计时。