当前位置：首页 > 文章列表 > 文章 > 前端 > 防抖与节流：JS优化技巧详解

防抖与节流：JS优化技巧详解

2025-06-29 08:18:01 0浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《防抖与节流是JavaScript中常用的优化技巧，用于控制函数的执行频率，特别是在处理高频触发事件（如滚动、调整窗口大小、输入框输入等）时非常有用。它们的核心目标是提升性能，避免不必要的计算和渲染。一、防抖（Debounce）定义：防抖是指在事件被触发后，等待一段时间，如果在这段时间内没有再次触发该事件，则执行函数；如果在等待时间内再次触发，则重新计时。适用场景：搜索框输入实时搜索建议（防止频繁请求）窗口调整大小时的布局更新鼠标移动事件示例代码：function debounce(func, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; } // 使用示例 window.addEventListener('resize', debounce(() => { console.log('窗口大小已调整'); }, 300));二、节流（Throttle）定义：节流是指在一定时间间隔内，无论事件触发多少次，只执行一次函数。即在指定的时间间隔内，函数只能被调用一次。适用场景：滚动事件（防止频繁触发）实时输入验证（限制验证频率》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

防抖和节流是JavaScript中优化性能的技术。防抖在事件停止触发后执行函数，适用于搜索框输入；节流在一定时间内只执行一次函数，适用于滚动事件。

什么是JavaScript中的防抖和节流？

防抖和节流是JavaScript中用来优化性能的两种技术，特别是在处理频繁触发的事件时，比如滚动、输入或鼠标移动。让我们深入探讨一下这两个概念。

防抖（Debounce）是一种在事件触发后，延迟执行某个函数的技术。如果在延迟时间内再次触发了事件，之前的延迟将被取消，重新开始计时。这样可以确保函数在事件停止触发后的一段时间内只执行一次。这在处理搜索框输入时非常有用，避免每次输入都发送请求。

节流（Throttle）则是在一定时间内只允许函数执行一次，无论在这段时间内事件被触发了多少次。节流适用于需要频繁触发但又不想让函数执行得太频繁的场景，比如滚动事件处理。

让我们来看看如何实现这些技术，并探讨它们的优劣以及一些实际应用中的经验。

防抖的实现与应用

防抖的核心思想是设置一个定时器，在事件触发后启动定时器。如果在定时器结束前再次触发事件，则清除之前的定时器并重新设置一个新的定时器。只有当定时器结束时，才会执行目标函数。

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

// 使用示例
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(function (value) {
    console.log('Searching for:', value);
}, 300);

searchInput.addEventListener('input', function (e) {
    debouncedSearch(e.target.value);
});

在实际应用中，防抖可以显著减少不必要的API调用或计算，但需要注意的是，延迟时间的选择非常关键。如果延迟时间过长，用户可能会觉得响应不够及时；如果过短，又可能无法达到优化效果。

节流的实现与应用

节流的实现通常是通过记录上次执行的时间来控制函数的执行频率。如果当前时间与上次执行的时间差大于设定的间隔时间，则执行函数。

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function (...args) {
        if (!lastRan) {
            func.apply(this, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function () {
                if (Date.now() - lastRan >= limit) {
                    func.apply(this, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

// 使用示例
const scrollHandler = throttle(function () {
    console.log('Scrolling...');
}, 1000);

window.addEventListener('scroll', scrollHandler);

节流在处理滚动事件时非常有用，可以避免频繁的DOM操作或计算，但需要注意的是，节流可能会导致一些事件的丢失，因为它只在固定的时间间隔内执行一次。