JavaScript 防抖与节流的区别及代码实现

1. 应用场景分析

在处理用户输入或页面交互时，通常面临两类主要需求，虽然都涉及频率控制，但逻辑截然不同：

• 搜索联想（防抖场景）：监听输入框的 input 事件。若每次按键都向后端发送请求，将造成严重的服务器压力且返回结果可能过时。正确做法是等待用户停止输入一定时间后，再统一发送最后一次请求。
• 无限滚动加载（节流场景）：监听 window 的 scroll 事件。用户在浏览过程中需要不断加载下一页数据。此时并非要等待用户停止滚动，而是需要在滚动过程中每隔一段时间请求一次数据，保证内容平滑加载的同时避免请求过于密集。

2. 防抖（Debounce）

第1步：理解防抖原理

防抖的核心逻辑是“重置倒计时”。在事件被触发的 n 秒内再次被触发，则重新计算延迟时间。只有当最后触发事件后 n 秒内没有再触发，回调函数才会执行。这意味着无论用户触发多少次，最终只会在操作停止后执行一次。

第2步：代码实现

实现关键在于使用一个变量记录定时器 ID，每次触发时清除旧定时器并创建新定时器。

// fn: 需要执行的回调函数
// ms: 延迟等待的时间（毫秒）
function debounce(fn, ms) {
    let timer = null;
    return function() {
        // 每次触发都清除上一次的定时器
        if (timer) clearTimeout(timer);
        // 设置新的定时器
        timer = setTimeout(() => {
            // apply 保持 this 指向一致
            fn.apply(this, arguments);
        }, ms);
    };
}

第3步：实战应用示例

以搜索输入为例，用户每输入一个字符都会触发 debounce 包裹的函数，但只有在停止输入 800ms 后，才真正发起请求。

<input id="searchInput" />
<script>
const inputEl = document.getElementById('searchInput');

function getData() {
    console.log('正在请求数据...');
    // 此处替换为实际的 Ajax 请求
}

// 绑定输入事件，设置 800ms 防抖延迟
inputEl.oninput = debounce(getData, 800);
</script>

3. 节流（Throttle）

第1步：理解节流原理

节流的核心逻辑是“固定频率执行”。规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。通常通过布尔标志位（lock flag）来实现。

第2步：代码实现

实现时使用一个标识位 canRun。触发时先检查标识位，若为 false 则忽略；若为 true 则设为 false 并开始定时器，定时器结束后将标识位置回 true。

// fn: 需要执行的回调函数
// ms: 执行的时间间隔（毫秒）
function throttle(fn, ms) {
    let canRun = true; // 通过此标志位判断是否处于空闲状态
    return function() {
        if (!canRun) return; // 如果不在空闲状态，直接返回，不执行
        
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true; // 定时器结束，恢复空闲状态
        }, ms);
    };
}

第3步：实战应用示例

以窗口滚动为例，确保即使在快速拖动滚动条，请求也每隔 800ms 执行一次。

<script>
function loadMoreData() {
    console.log('正在加载更多数据...');
    // 此处替换为获取下一页数据的逻辑
}

// 绑定滚动事件，设置 800ms 节流间隔
window.addEventListener('scroll', throttle(loadMoreData, 800));
</script>

4. 总结与对比

防抖与节流的本质都是为了减少高频事件的执行次数，从而降低浏览器重绘压力和服务器的请求负担。在实际开发中，应根据业务逻辑是更需要“关注最终结果”还是“关注过程频率”来选择合适的方案。

以上就是 JavaScript 防抖与节流的区别与实现的详细内容，更多关于 JavaScript 防抖节流优化的资料请关注本站其它相关文章！