前端面试中常见的JavaScript防抖节流问题是什么？

JavaScript防抖与节流问题解析

在前端开发面试中,JavaScript 的性能优化技巧常常是考察重点，而防抖（debounce）和节流（throttle）作为高频出现的题目，几乎成为每个前端工程师必须掌握的知识点。前端面试中常见的 JavaScript 防抖与节流问题是什么？ 简而言之，防抖和节流是两种优化高频事件处理的技术，用于控制函数的执行频率，避免因频繁触发导致的性能问题或逻辑错误，下面我们将深入探讨这两个概念，帮助你在面试中游刃有余。

为什么需要防抖与节流？

在 Web 开发中，许多用户交互行为（如窗口调整、滚动事件、输入框实时搜索、按钮连续点击等）会频繁触发事件处理函数，如果这些函数包含复杂的计算或 DOM 操作，频繁执行可能导致页面卡顿，甚至浏览器无响应，防抖和节流正是为了解决这类问题而设计的策略，它们通过限制函数的执行次数来提升应用性能。

防抖（Debounce）原理与实现

防抖的核心思想是： 在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内事件再次被触发，则重新计时，这好比电梯门，当有人进入时，电梯不会立即关闭，而是等待一段时间确认无人再进入后才关门。

简单实现示例：

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

应用场景： 输入框实时搜索建议、窗口大小调整后的响应处理等。

节流（Throttle）原理与实现

节流的核心在于： 无论事件触发多么频繁，都保证在规定的时间间隔内只执行一次回调函数，这类似于水龙头的节水器，无论水流多急，出水速度都被限制在一定范围内。

简单实现示例：

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const context = this;
        const args = arguments;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

或者使用时间戳的方式实现,确保首次和最后一次触发都能得到响应。

应用场景： 滚动事件处理、按钮防重复点击、游戏中的帧率控制等。