前端防抖与节流：核心概念、区别及代码实现

作者：霁月时间：2026-10-31 18:06:25浏览：617

本文深入解析前端开发中防抖（Debounce）与节流（Throttle）的核心原理、区别及应用场景。通过对比分析，明确防抖适用于输入结束后的延迟执行（如搜索联想），而节流适用于固定频率的执行控制（如滚动监听）。文章提供完整的 JavaScript 代码实现示例，帮助开发者有效降低高频事件触发的性能开销，提升用户体验。

前言

在前端开发领域，应对高频事件触发是常见需求，比如窗口 resize、页面滚动 scroll、用户输入 keyup 或 keydown 等场景。若缺乏控制，高频触发会引发性能瓶颈，故防抖（Debounce）与节流（Throttle）技术至关重要。本文深入解析其概念、差异、场景及实现。

一、防抖（Debounce）

1.1 什么是防抖？

防抖属延迟执行策略。其机制为：事件触发后延迟处理函数执行，若在延迟期内再次触发，则重置计时器。仅当指定时间内无新触发时，函数才执行。此法避免高频操作，提升性能。

1.2 适用场景

防抖适用于用户停止操作后需执行的场景，如：

搜索输入框：用户输入时连续触发 keyup，仅在输入结束后发送请求。
窗口调整：浏览器窗口大小改变时频繁触发 resize，防抖确保调整后执行操作。
表单验证：用户输入表单数据时，利用防抖减少频繁验证请求。

1.3 防抖的实现

以下 JavaScript 示例展示防抖实现：

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

解释：

debounce 函数接收两个参数：func 为待执行函数，wait 为延迟时间。
每次触发事件时，先清除上一次的 timeout，再设置新定时器。
仅在指定 wait 时间内无新事件触发时，func 才会执行。

1.4 使用示例

假设在搜索输入框中使用防抖减少请求：

const searchInput = document.getElementById('search');
const handleSearch = debounce(function() {
    console.log('Sending request for:', this.value);
}, 500);

searchInput.addEventListener('keyup', handleSearch);

此例中，用户停止输入 500 毫秒后，handleSearch 才会执行，减少不必要请求。

二、节流（Throttle）

2.1 什么是节流？

节流限制函数执行频率。其原理为：事件频繁触发时，函数按固定时间间隔执行，而非每次触发都执行。即一段时间内仅执行一次处理函数。

2.2 适用场景

节流适用于需间隔执行的场景，如：

页面滚动：用户滚动时触发 scroll，节流限制处理频率。
按钮点击：防止短时间内多次点击导致重复提交。
游戏动画：限制每秒渲染帧数，降低资源消耗。

2.3 节流的实现

以下 JavaScript 示例展示节流实现：

/**
 * 节流函数
 * @param {Function} func - 需要节流的函数
 * @param {number} wait - 时间间隔（毫秒），表示在这个时间间隔内最多执行一次函数
 * @returns {Function} - 返回一个节流后的函数
 */
function throttle(func, wait) {
    // 上一次执行函数的时间戳，初始值为 0
    let lastTime = 0;

    // 返回一个闭包函数，作为节流后的函数
    return function (...args) {
        // 获取当前时间戳
        const now = Date.now();

        // 如果当前时间与上一次执行时间的差值大于等于 wait，则执行函数
        if (now - lastTime >= wait) {
            // 更新上一次执行函数的时间戳
            lastTime = now;
            // 调用原始函数，并传入参数
            func.apply(this, args);
        }
    };
}

2.4 使用示例

以下示例展示使用节流限制 scroll 事件处理频率：

// 原始的滚动事件处理函数
function handleScroll() {
    console.log('Scroll event triggered');
}

// 使用节流函数包装 handleScroll
const throttledScrollHandler = throttle(handleScroll, 200);

// 监听滚动事件，并使用节流后的函数
window.addEventListener('scroll', throttledScrollHandler);

此例中，handleScroll 函数每次滚动时执行，但每隔一段时间仅执行一次，即使 scroll 事件频繁触发。

三、防抖与节流的区别

比较维度	防抖（Debounce）	节流（Throttle）
定义	延迟执行，在指定时间内不再触发事件才会执行。	限制执行频率，每隔一定时间执行一次。
触发时机	最后一次触发事件后	按照固定的时间间隔执行
适用场景	输入框搜索、表单验证、窗口调整	页面滚动、按钮点击、游戏动画
控制频率	事件停止后执行一次	固定时间间隔内执行一次
实现原理	重新计时，如果时间内再次触发事件则清除计时器	记录上次执行时间，或设置定时器

四、综合应用示例

有时需在同一项目同时使用防抖和节流。例如，搜索联想提示中，用节流控制 API 请求频率，用防抖控制显示搜索结果时间。

const searchInput = document.getElementById('search');

// 使用防抖来控制输入事件
const handleSearch = debounce(function() {
    // 使用节流来控制请求频率
    throttleSearch();
}, 300);

// 使用节流来控制请求频率
const throttleSearch = throttle(function() {
    console.log('Fetching search results for:', searchInput.value);
}, 1000);

searchInput.addEventListener('keyup', handleSearch);

此示例中，防抖函数减少输入事件频率，用户停止输入 300 毫秒后触发 throttleSearch。而 throttleSearch 函数使用节流限制请求频率，确保 1000 毫秒内仅发起一次请求。