后端科技领域，降伏恶龙的两个技巧：防抖与节流

前端

2023-12-12 05:04:01

序言

在日常开发中，我们常常会遇到一些频繁触发的事件，比如搜索框实时发送请求、鼠标移动、窗口调整大小、页面滚动等等。我们通常不能或者不想让这些事件频繁触发，此时，如何高效应对这些挑战就成为了一个关键课题。

正是在这样的背景下，js 函数防抖（debounce）与节流（throttle）这两个概念横空出世，成为了前端优化领域中的两大法宝。它们就像驯龙高手中的隐秘武器，帮助我们驯服性能挑战，让代码世界如履平地，一往无前。

让我们一起踏上这场探索之旅，深入了解函数防抖与节流的奥妙，学习如何使用它们来优化前端性能，让代码运行得更加丝滑流畅，让用户体验更加舒心惬意。

防抖

防抖（debounce）是一种优化技术，它可以防止函数在短时间内被多次调用。它的核心思想是：如果一个函数在短时间内被多次调用，那么只执行一次，并将后续的调用忽略掉。

原理与实现

防抖的原理非常简单，它使用了一个定时器来控制函数的执行。当函数被调用时，它会启动一个定时器。如果在定时器到期之前函数又被调用，那么定时器就会被重新启动，这样函数就不会被执行。只有当定时器到期后，函数才会被执行一次。

以下代码展示了防抖函数的实现：

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

使用这个防抖函数非常简单，只需要将需要防抖的函数作为参数传递给它即可。例如，以下代码演示了如何使用防抖函数来优化搜索框的实时搜索功能：

const searchInput = document.getElementById('search-input');
const search = debounce((query) => {
  // 发送搜索请求
  fetch(`/search?q=${query}`)
    .then(response => response.json())
    .then(data => {
      // 渲染搜索结果
      renderSearchResults(data);
    });
}, 500);

searchInput.addEventListener('input', (e) => {
  search(e.target.value);
});

在这个例子中，我们使用防抖函数来优化搜索框的实时搜索功能。当用户在搜索框中输入内容时，防抖函数会将搜索请求延迟 500 毫秒发送给服务器。这样，如果用户在 500 毫秒内又输入了新的内容，那么之前的搜索请求就会被取消，只发送最新的搜索请求。这样可以有效地减少不必要的服务器请求，提高搜索性能。

节流

节流（throttle）也是一种优化技术，它可以防止函数在短时间内被多次调用。但是，与防抖不同的是，节流允许函数在短时间内被多次调用，但它会控制函数的调用频率，确保函数不会被调用得太频繁。

原理与实现

节流的原理也很简单，它使用了一个时间戳来记录函数上次被调用的时间。当函数被调用时，它会检查当前时间与上次调用时间之间的间隔。如果间隔小于指定的阈值，那么函数就不会被执行。只有当间隔大于或等于指定的阈值时，函数才会被执行。

以下代码展示了节流函数的实现：

function throttle(func, wait) {
  let lastCallTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCallTime >= wait) {
      func.apply(this, args);
      lastCallTime = now;
    }
  };
}

使用这个节流函数也非常简单，只需要将需要节流的函数作为参数传递给它即可。例如，以下代码演示了如何使用节流函数来优化窗口调整大小的事件处理：

const window = document.window;
const resizeHandler = throttle((e) => {
  // 更新布局
  updateLayout();
}, 250);

window.addEventListener('resize', resizeHandler);

在这个例子中，我们使用节流函数来优化窗口调整大小的事件处理。当窗口大小发生变化时，节流函数会将事件处理延迟 250 毫秒执行。这样，如果用户在 250 毫秒内又调整了窗口大小，那么之前的事件处理就会被取消，只执行最新的事件处理。这样可以有效地减少不必要的布局更新，提高页面性能。