JS debounce|极客笔记

JS debounce

在前端开发中，我们经常会遇到一些需要频繁触发的事件，比如窗口的滚动、输入框的输入等等。如果每次事件触发都立即执行相应的处理函数，可能会导致页面性能下降，甚至出现卡顿的情况。为了解决这个问题，我们可以使用debounce（防抖）的技术。

什么是防抖

防抖是一种常用的技术，它的作用是在事件触发后，等待一定的时间间隔，如果这段时间内没有再次触发该事件，才会执行相应的处理函数。换句话说，防抖可以将多次触发的事件合并为一次触发。

防抖的原理

防抖的原理非常简单，我们可以通过一个定时器来实现。当事件触发时，我们先清除之前设置的定时器，然后重新设置一个新的定时器。如果在定时器的时间间隔内再次触发了该事件，就会清除之前的定时器，重新设置一个新的定时器。只有在定时器时间间隔内没有再次触发事件，才会执行相应的处理函数。

下面是一个使用原生JavaScript实现的防抖函数的示例代码：

function debounce(func, wait) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
};

在这个示例中，debounce函数将一个函数作为参数传入，并返回一个新的函数。这个新的函数就是防抖后的处理函数。wait参数表示定时器的时间间隔。当返回的函数被触发时，会清除之前设置的定时器，并重新设置一个新的定时器。当定时器的时间间隔内没有再次触发事件时，才会执行传入的函数。

防抖的应用场景

防抖在很多场景下都有广泛的应用，特别是在用户输入相关的场景中。比如搜索框的输入，很多情况下我们不希望每输入一个字符就触发搜索操作，而是等待用户停止输入一段时间后再触发搜索操作。这时候就可以使用防抖来延迟搜索的触发。

另外，还有一些其他场景也可以使用防抖来优化页面性能。比如在窗口的滚动事件中，触发频率非常高。如果每次滚动都重新计算页面布局或进行其他耗时操作，势必会影响页面的流畅性。此时可以使用防抖来延迟处理函数的执行，从而减少性能开销。

实例演示

下面我们通过一个实例来演示防抖的应用。

假设我们有一个搜索框，用户在搜索框内输入内容后，我们需要向服务器发送请求进行搜索。但是我们不希望用户每输入一个字符就立即发送请求，而是等待用户停止输入一段时间后再发送请求。这时候就可以使用防抖来实现。

首先，我们需要在HTML中创建一个输入框和一个用于显示搜索结果的容器。

<input type="text" id="search-input" />
<ul id="result-container"></ul>

然后，我们可以使用以下代码来实现防抖的功能：

// 获取输入框和结果容器的DOM元素
const input = document.getElementById('search-input');
const container = document.getElementById('result-container');

// 创建一个用于发送请求的函数
function search(keyword) {
  // 这里可以进行搜索请求的处理，比如发送Ajax请求
  console.log(`正在搜索：${keyword}`);
}

// 使用防抖函数包装搜索函数
const debounceSearch = debounce(search, 300);

// 监听输入框的输入事件
input.addEventListener('input', function () {
  // 获取输入的关键词
  const keyword = this.value;

  // 清空之前的搜索结果
  container.innerHTML = '';

  // 调用防抖函数进行搜索
  debounceSearch(keyword);
});

在这个示例中，我们首先获取了输入框和结果容器的DOM元素。然后创建了一个用于发送请求的函数search，在这个函数中我们可以实现真正的搜索逻辑。接下来，我们使用防抖函数debounce将search函数包装起来，生成了一个新的防抖后的函数debounceSearch。最后，我们监听了输入框的输入事件，并在事件处理函数中调用了debounceSearch函数。

通过这个示例，我们可以看到防抖函数在搜索框输入场景中的应用。每当用户输入内容时，都会触发输入事件，但是并不立即触发搜索请求，而是等待一定的时间间隔。只有当用户停止输入后，才会触发搜索请求。这样可以减少请求的频率，优化用户体验。