防抖函数（最全最干净最好理解）

原创已于 2023-03-27 16:37:53 修改 · 2.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2023-03-27 16:21:03 首次发布

文章介绍了JavaScript中的防抖(debounce)技术，主要用于优化高频场景如输入查询、验证等，防止重复渲染。通过调整函数执行时机，避免在短时间内多次触发同一操作。文中详细解释了防抖函数的实现，包括处理this问题、事件对象以及如何通过apply方法传递参数。并提供了一个具体的防抖函数实现示例，应用于鼠标移动事件以控制元素内容更新。

1.应用场景

1.input输入框输入远程查询

2.邮箱，手机号验证，用户名验证

3.resize等高评率场景

2.解决问题

高频场景带来的重复渲染等问题

多次操作只在操作结束后再执行操作函数

3.具体实现

3.1this问题（因为settimeout是window的对象所以函数中this指向window 除非箭头函数）

1.事件函数里的this才指向box

错误示范：return里面的this 与函数体内的this指向在不同场景中指向并不相同

解决方案：可以使用 fun.call(this) 来重定向函数中this的指向【call 传参是单个】

3.2事件对象

1.arguments 作为函数的关键字，它接收的是这个函数传递的所有实参，包括这个事件对象

因为事件对象是默认传递的参数，因为call只能传递一个参数，所以我们选择使用 fun.apply(this, args)

3.3具体代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100%;
        }
        body {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background: #FF9800;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">  0 </div>
    <script>
        const debounce = function (fun, delay) {
            let timeout
            return function() {
                timeout && clearTimeout(timeout)
                // 解决事件函数绑定中this
                let that = this
                // 绑定事件中 事件函数的传递
                let argus = arguments
                timeout = setTimeout(() => {
                  fun.apply(that, argus)  
                }, delay);
            }
        }
        function fun(e) {
            count++
            console.log('>>>>>>>>>>>>', e, this)
            e.target.innerText = count
        }
        let count = 0
        console.log()
        document.querySelectorAll('.box')[0].addEventListener('mousemove', debounce(fun, 300))
    </script>
</body>
</html>