防抖和节流的区别

最新推荐文章于 2026-04-04 10:39:57 发布

原创最新推荐文章于 2026-04-04 10:39:57 发布 · 1.2k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #开发语言

一、防抖（Debounce）
（一）定义
防抖是指在事件被触发后，延迟一定时间才执行回调函数。若在延迟时间内事件再次被触发，则重新计算延迟时间。简单来说，仅当经过一段规定时间且没有再次触发该事件时，才会执行对应的函数。
（二）工作原理
防抖函数内部维护一个定时器。当事件首次触发时，启动定时器，延迟指定时间后执行目标函数。若在延迟时间内事件再次触发，则清除之前的定时器，并重新设置一个新的定时器。如此一来，只有在最后一次触发事件且经过指定延迟时间后，目标函数才会真正执行。
（三）应用场景
实时搜索：用户在搜索框输入内容时，每次输入都会触发 input 事件。若不处理，可能会频繁发送请求到服务器获取搜索结果，既影响用户体验，又浪费资源。使用防抖技术，可确保用户停止输入一段时间（如 300 毫秒）后才发起搜索请求，减少请求次数。
窗口调整：调整浏览器窗口大小时会频繁触发 resize 事件。若每次调整都重新计算布局或刷新数据，可能引发性能问题。通过防抖，可在窗口大小稳定后（例如停止调整 100 毫秒后），再执行相关操作。
表单提交：防止用户短时间内多次点击提交按钮，造成重复提交。可在按钮点击事件上应用防抖，确保用户最后一次点击后，延迟一定时间执行提交操作。
（四）示例代码（JavaScript）

function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}
// 使用示例
const debouncedFunction = debounce(() => {
    console.log('防抖函数执行');
}, 300);
document.getElementById('searchInput').addEventListener('input', debouncedFunction);

二、节流（Throttle）
（一）定义
节流是指在一定时间间隔内，无论事件触发多少次，函数只会执行一次。即函数按照固定的时间周期执行。
（二）工作原理
节流函数有多种实现方式，常见的是通过时间戳或定时器来控制函数的执行频率。
时间戳方式：记录上一次函数执行的时间戳。每次事件触发时，计算当前时间与上一次执行时间的差值。若差值大于设定的时间间隔，则执行函数，并更新上一次执行的时间戳。
定时器方式：在事件首次触发时，启动定时器，延迟指定时间后执行函数。在定时器未结束前，若事件再次触发，不执行函数。当定时器结束后，再次触发事件才会执行函数，并重新启动定时器。
（三）应用场景
滚动事件：页面滚动时会频繁触发 scroll 事件。若在每次滚动时都执行复杂操作（如加载更多数据、计算元素位置等），可能导致页面卡顿。使用节流技术，可限制滚动事件处理函数的执行频率，如每 200 毫秒执行一次。
鼠标移动：在一些需要实时响应鼠标位置的场景（如绘制图形、拖拽元素）中，mousemove 事件会频繁触发。通过节流，可控制事件处理函数的调用频率，避免过度计算。
游戏中的动画更新：在游戏开发中，需要按一定频率更新动画帧。使用节流可确保动画以固定频率更新，保证流畅性和性能。
（四）示例代码（JavaScript）
时间戳方式

function throttle(func, delay) {
    let lastTime = 0;
    return function() {
        const context = this;
        const args = arguments;
        const now = new Date().getTime();
        if (now - lastTime >= delay) {
            func.apply(context, args);
            lastTime = now;
        }
    };
}
// 使用示例
const throttledFunction = throttle(() => {
    console.log('节流函数执行');
}, 200);
window.addEventListener('scroll', throttledFunction);

定时器方式

function throttle(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        if (!timer) {
            func.apply(context, args);
            timer = setTimeout(() => {
                clearTimeout(timer);
                timer = null;
            }, delay);
        }
    };
}
// 使用示例
const throttledFunction = throttle(() => {
    console.log('节流函数执行');
}, 200);
window.addEventListener('scroll', throttledFunction);

三、防抖与节流的区别

（一）执行时机