彻底掌控函数防抖和函数节流：化繁为简解难题

前端

2023-11-21 16:22:08

前言

在现代前端开发中，我们经常会遇到一些需要频繁触发的事件，如鼠标移动、键盘输入、滚动条滚动等。如果我们直接对这些事件进行处理，会导致代码执行过于频繁，不仅会降低页面的性能，还会对用户体验造成负面影响。

为了解决这个问题，前端工程师们发明了函数防抖和函数节流两种技术。它们通过对事件触发频率进行控制，有效地降低了代码的执行次数，从而提高了页面的性能和用户体验。

函数防抖

函数防抖是一种技术，它可以防止函数在一段时间内被重复触发。当一个事件在一段时间内连续触发时，函数防抖会只执行一次。

原理

函数防抖的原理很简单：它通过设置一个计时器来控制函数的执行时机。当一个事件触发时，计时器会重新启动。如果在计时器结束之前，事件再次触发，计时器将再次重新启动。这样，函数就只会被执行一次。

使用场景

函数防抖通常用于以下场景：

输入框中的搜索建议：当用户在输入框中输入内容时，搜索建议会动态更新。如果我们直接对键盘输入事件进行处理，会导致搜索建议过于频繁地更新，影响用户体验。使用函数防抖可以解决这个问题，它可以确保搜索建议只在用户停止输入一段时间后才更新。
滚动条滚动事件：当用户滚动页面时，滚动条滚动事件会频繁触发。如果我们直接对滚动条滚动事件进行处理，会导致代码执行过于频繁，降低页面的性能。使用函数防抖可以解决这个问题，它可以确保滚动条滚动事件只在用户停止滚动一段时间后才触发。

代码示例

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

// 使用函数防抖来处理输入框中的搜索建议
const input = document.getElementById('search-input');
const searchSuggestions = document.getElementById('search-suggestions');

input.addEventListener('input', debounce((e) => {
  const value = e.target.value;
  // 根据输入的内容获取搜索建议
  const suggestions = getSuggestions(value);

  // 更新搜索建议
  searchSuggestions.innerHTML = suggestions;
}, 500));

函数节流

函数节流是一种技术，它可以控制函数在一段时间内只执行一次。当一个事件在一段时间内连续触发时，函数节流只会执行最后一次。

原理

函数节流的原理与函数防抖类似，它也通过设置一个计时器来控制函数的执行时机。当一个事件触发时，计时器会启动。如果在计时器结束之前，事件再次触发，计时器将被重置。这样，函数就只会被执行最后一次。

使用场景

函数节流通常用于以下场景：

窗口调整大小事件：当用户调整窗口大小时，窗口调整大小事件会频繁触发。如果我们直接对窗口调整大小事件进行处理，会导致代码执行过于频繁，降低页面的性能。使用函数节流可以解决这个问题，它可以确保窗口调整大小事件只在用户停止调整窗口一段时间后才触发。
鼠标移动事件：当用户移动鼠标时，鼠标移动事件会频繁触发。如果我们直接对鼠标移动事件进行处理，会导致代码执行过于频繁，降低页面的性能。使用函数节流可以解决这个问题，它可以确保鼠标移动事件只在用户停止移动鼠标一段时间后才触发。

代码示例

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

// 使用函数节流来处理窗口调整大小事件
window.addEventListener('resize', throttle(() => {
  // 根据窗口大小调整页面布局
  adjustLayout();
}, 500));