JavaScript防抖函数debounce详解

前言

防抖函数是 JavaScript 中常用的函数之一，通过防抖函数的运用可以有效地控制函数的调用次数，有效地提高性能体验。本文将详细讲解防抖函数的使用方法，包括原理、实现方法以及示例等。

什么是防抖函数

在 JavaScript 中，当某个函数被频繁调用时，可能会导致页面性能问题，例如用户短时间内快速地多次点击按钮，就会导致该按钮函数被多次调用，而这些无效的调用将会浪费性能和资源。

为了解决这个问题，我们可以使用防抖函数。防抖函数是一种控制函数调用频率的技术，它可以通过延迟函数调用的时间来控制函数的执行次数，从而提高性能。

防抖函数的原理

所谓的防抖函数就是在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又被触发，则会重新开始计时，直到 n 秒后再执行。通俗理解就像是压缩弹簧，我们把它按下去，没有膨胀的时间，直到最后一个状态达到 n 秒钟，才会执行最后的动作。

如何实现防抖函数

下面我们来看一下如何实现一个简单的防抖函数：

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    const context = this;
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

上述代码中，我们定义了一个 debounce 函数，该函数接收两个参数：fn 表示我们要进行防抖的函数，delay 表示防抖的时间。

我们在 debounce 函数中定义了一个变量 timer，这个变量的作用是用来保存一个计时器对象。在每次函数被调用时，我们会检查变量 timer 是否存在，如果存在，则清空计时器；如果不存在，则创建一个计时器并保存到变量 timer 中。计时器会在 delay 秒后调用我们传入的函数 fn。

防抖函数的示例

下面我们来看一下使用防抖函数的两个示例。

示例一：文本框搜索

<input type="text" id="search-box" />

// 获取输入框元素
const searchBox = document.getElementById('search-box');

// 定义防抖函数
const debounceSearch = debounce(function () {
  console.log('搜索');
}, 1000);

// 添加事件监听，调用防抖函数
searchBox.addEventListener('input', debounceSearch);

在上述示例中，我们创建了一个文本框搜索功能，该功能会在用户输入时触发防抖函数，防止频繁的搜索请求。

示例二：滚动事件

// 定义防抖函数
const debounceScroll = debounce(function () {
  console.log('滚动');
}, 1000);

// 监听页面滚动事件
window.addEventListener('scroll', debounceScroll);

在上述示例中，我们创建了一个页面滚动功能，该功能会在用户滚动页面时触发防抖函数，防止频繁的滚动事件。