什么是函数防抖动（Debouncing）

青旅半醒 2023-06-18 04:00 12阅读 0赞

**有一些浏览器事件可以在很短的时间内快速启动多次，例如调整窗口大小或向下滚动页面。** 例如，如果将事件侦听器绑定到窗口滚动事件上，并且用户继续非常快速地向下滚动页面，你的事件可能会在3秒的范围内被触发数千次。这可能会导致一些严重的性能问题。

如果你在面试中讨论构建应用程序和事件，如滚动，窗口调整大小，或键盘按下的事件时，请务必提及 函数防抖动(Debouncing) 和/或 函数节流（Throttling）来提升页面速度和性能。

一个真实的案例，来自 guest post on css-tricks:在2011年，一个问题在Twitter上被提出：当你滚动Twitter feed时，它会会变得非常慢甚至未响应。John Resig 就这个问题发布了一篇博文，它解释了直接绑定函数到scroll事件上是多么糟糕的事。

函数防抖动(Debouncing) 是解决这个问题的一种方式，通过限制需要经过的时间，直到再次调用函数。一个正确实现函数防抖的方法是：**把多个函数放在一个函数里调用，隔一定时间执行一次。**

这里有一个使用原生JavaScript实现的例子，用到了作用域、闭包、this和定时事件：

// debounce函数用来包裹我们的事件
    function debounce(fn, delay) { 
      // 持久化一个定时器 timer
      let timer = null;
      // 闭包函数可以访问 timer
      return function() { 
        // 通过 'this' 和 'arguments'
        // 获得函数的作用域和参数
        let context = this;
        let args = arguments;
        // 如果事件被触发，清除 timer 并重新开始计时
        clearTimeout(timer);
        timer = setTimeout(function() { 
          fn.apply(context, args);
        }, delay);
      }
    }

当这个函数绑定在一个事件上，只有经过一段指定的时间后才会被调用。  
你可以像这样去使用这个函数：

// 当用户滚动时函数会被调用
    function foo() { 
      console.log('You are scrolling!');
    }
    
    // 在事件触发的两秒后，我们包裹在debounce中的函数才会被触发
    let elem = document.getElementById('container');
    elem.addEventListener('scroll', debounce(foo, 2000));

函数节流是另一个类似函数防抖的技巧，除了使用等待一段时间再调用函数的方法，函数节流还限制固定时间内只能调用一次。所以一个事件如果在100毫秒内发生10次，函数节流会每2秒调用一次函数，而不是100毫秒内全部调用。