JavaScript 防抖节流封装优化：原理、实现与应用

2026-03-18 10:30:02 8158阅读

一、引言

在前端开发中，我们经常会遇到一些高频触发的事件，如窗口的 resize、scroll 事件，输入框的 input 事件，按钮的多次点击事件等。如果不加以处理，这些高频触发的事件会导致性能问题，甚至影响用户体验。为了解决这个问题，我们通常会使用防抖（Debounce）和节流（Throttle）技术。本文将详细介绍防抖和节流的原理、封装方法以及如何进行优化。

二、防抖和节流的原理

2.1 防抖原理

防抖的核心思想是：在一定时间内，只有最后一次触发事件才会执行相应的处理函数。如果在这个时间内再次触发事件，则重新计时。例如，在搜索框输入内容时，我们希望用户停止输入一段时间后再进行搜索，而不是每次输入都触发搜索请求，这样可以减少不必要的请求，提高性能。

2.2 节流原理

节流的核心思想是：在一定时间内，只执行一次处理函数。即使在这个时间内多次触发事件，也只会在规定的时间间隔内执行一次。例如，在滚动加载数据时，我们不希望每次滚动都触发加载请求，而是每隔一段时间触发一次，这样可以避免频繁的请求，提高性能。

三、基本的防抖和节流封装

3.1 防抖封装

// 防抖函数封装
function debounce(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    // 清除上一次的定时器
    if (timer) clearTimeout(timer);
    // 重新设置定时器
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

使用示例：

function search() {
  console.log('执行搜索');
}
const debouncedSearch = debounce(search, 500);
// 模拟输入事件
window.addEventListener('input', debouncedSearch);

3.2 节流封装

// 节流函数封装
function throttle(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    // 如果定时器不存在，则执行函数
    if (!timer) {
      func.apply(context, args);
      // 设置定时器
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
}

使用示例：

function loadData() {
  console.log('加载数据');
}
const throttledLoadData = throttle(loadData, 1000);
// 模拟滚动事件
window.addEventListener('scroll', throttledLoadData);

四、防抖和节流的优化

4.1 防抖优化

4.1.1 立即执行版防抖

有时候我们希望在第一次触发事件时立即执行处理函数，而不是等待一段时间。可以通过添加一个参数来控制是否立即执行。

// 立即执行版防抖
function debounce(func, delay, immediate = false) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    // 如果定时器存在，清除定时器
    if (timer) clearTimeout(timer);
    if (immediate) {
      // 如果没有定时器，立即执行函数
      const callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      if (callNow) func.apply(context, args);
    } else {
      // 重新设置定时器
      timer = setTimeout(() => {
        func.apply(context, args);
      }, delay);
    }
  };
}

4.2 节流优化

4.2.1 时间戳版节流

除了使用定时器实现节流，还可以使用时间戳来实现。时间戳版节流会在第一次触发事件时立即执行处理函数，然后在规定的时间间隔内不再执行。

// 时间戳版节流
function throttle(func, delay) {
  let previous = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    // 如果当前时间减去上一次执行时间大于等于延迟时间，则执行函数
    if (now - previous >= delay) {
      func.apply(context, args);
      previous = now;
    }
  };
}

4.2.2 结合时间戳和定时器的节流

结合时间戳和定时器的节流可以同时具备时间戳版和定时器版的优点，即第一次触发事件时立即执行，最后一次触发事件也会执行。

// 结合时间戳和定时器的节流
function throttle(func, delay) {
  let timer = null;
  let previous = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    const remaining = delay - (now - previous);
    if (remaining <= 0) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      func.apply(context, args);
      previous = now;
    } else if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        previous = Date.now();
        timer = null;
      }, remaining);
    }
  };
}