防抖（debounce）函数

strap

已于 2024-07-02 18:00:05 修改

阅读量586

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端随记文章标签： javascript 开发语言

于 2024-07-02 17:57:33 首次发布

本文链接：https://blog.youkuaiyun.com/strap/article/details/140132930

前端随记专栏收录该内容

6 篇文章

订阅专栏

防抖的原理

防抖（debounce）的基本原理是将多次执行合并为一次执行。具体来说，当事件频繁触发时，防抖机制会在每次事件触发时重置计时器，只有当事件在一定时间内没有再次触发时，函数才会执行。这样可以避免函数在短时间内被多次调用，从而提高性能和响应速度。

实现步骤：

初始化一个计时器：在防抖函数内部创建一个计时器变量。
清除计时器：每次事件触发时，清除之前的计时器。
设置新计时器：重新设置一个新的计时器，在指定时间后执行目标函数。
延迟执行函数：只有当事件在指定的延迟时间内没有再次触发时，目标函数才会被执行。

应用场景

防抖机制主要用于需要限制函数频繁调用的场景。以下是一些常见的应用场景：

搜索框输入：
- 在用户输入搜索关键字时，如果每次输入变化都触发搜索请求，会导致大量的请求发送到服务器。使用防抖机制可以确保只有用户停止输入后的一段时间内才发送一次请求，从而减少请求次数。
窗口调整大小：
- 在窗口大小变化时，频繁触发调整事件可能导致性能问题。使用防抖机制可以确保只有窗口大小调整完成后再执行调整函数。
滚动事件：
- 页面滚动时可能会触发大量的滚动事件，使用防抖机制可以减少滚动事件的处理次数，提升页面性能。
按钮点击：
- 防止按钮被快速重复点击多次，导致函数被多次调用，可以使用防抖机制限制按钮的点击频率。

代码示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="myButton">连续点击测试</button>

<script>

    function Debounce(fn, delay) {
        this.fn = fn; // 需要防抖的函数
        this.delay = delay; // 延迟时间
        this.timer = null; // 定时器

        // 包装的防抖函数
        this.debounced = function() {
            var context = this;
            var args = arguments;

            clearTimeout(this.timer);
            this.timer = setTimeout(function() {
                fn.apply(context, args);
            }, delay);
        };
    }

   
    function sayHello(name) {
        console.log('Hello, ' + name + '!');
    }

    var debouncedSayHello = new Debounce(sayHello, 500);

    // 绑定事件
    document.getElementById('myButton').addEventListener('click', function() {
        debouncedSayHello.debounced('World');
    });

</script>

</body>
</html>