当前位置：首页 > 文章列表 > 文章 > 前端 > 防抖与节流：JS性能优化关键技巧

防抖与节流：JS性能优化关键技巧

2025-06-26 08:06:05 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）定义：节流是指在一定时间间隔内，只执行一次函数，即使事件被频繁触发，也会》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

防抖和节流是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操作或计算，但需要注意的是，节流可能会导致一些事件的丢失，因为它只在固定的时间间隔内执行一次。