JavaScript 非常适合让您的 Web 应用程序变得动态和交互，但它本身无法很好地处理一件事：频繁的事件。考虑诸如调整窗口大小、滚动和在搜索框中键入等操作。如果管理不当，这些事件触发器可能会淹没您的应用程序，从而减慢速度并造成缓慢的用户体验。这就是去抖动和节流的用武之地。这些技术可以帮助您控制执行某些功能的频率，从而使您的应用程序保持快速和响应能力。

在本文中，我们将分解去抖动和节流，向您展示何时使用它们，并提供真实的示例来查看它们的实际效果。让我们深入研究这些基本的 JavaScript 性能优化技术！

什么是去抖动？

它是如何运作的

将反跳想象为等待某人说完然后你才开始回复。如果你曾经在一次谈话中有人不断打断你，你就会明白了！ debouncing 的关键概念是，它延迟函数的执行，直到自上次触发事件以来经过指定的时间。

简单来说，如果一个事件（如用户打字）持续快速发生，去抖动可确保相关功能（如搜索查询）仅在用户停止指定时间段后执行。

何时使用去抖

当您想要限制由于频繁的用户输入而导致的过多函数调用时，您应该使用去抖动。一个典型的例子是，当您有一个搜索框并希望在用户每次键入时进行 API 调用。如果没有去抖，每次击键都会调用 API，从而在服务器上造成不必要的负载。通过去抖，只有当用户停止输入时才会调用 API。

代码中的去抖动

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

// Usage
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
    console.log('API call made!');
}, 300)); // Only executes 300ms after the last keystroke

在此示例中，debounce 函数确保 API 调用仅在用户停止键入后 300 毫秒发生。

什么是节流？

它与去抖有何不同

现在，我们来谈谈节流。如果去抖动等待直到喋喋不休才做出响应，那么节流就像一个交通警察，每隔几秒钟只让一辆车通过，无论有多少辆车在等待。它确保每个设定周期最多调用一次函数，即使事件被重复触发。

何时使用节流

当您需要确保随着时间的推移保持一致的执行时，您将需要使用限制。例如，当用户向下滚动页面时，滚动事件每秒可以触发数十次。如果没有限制，您的应用程序在尝试处理所有这些事件时可能会变慢。限制限制了滚动事件处理程序的执行频率，从而提高了性能。

代码中的节流

函数节流阀(func, limit) { 让最后的调用= 0； 返回函数（...args）{ const now = Date.now(); if (现在 - LastCall >= 限制) { 上次通话=现在； func.apply(this, args); } }; } // 用法 window.addEventListener('滚动', 油门(() => { console.log('滚动事件！'); }, 1000)); // 最多每1000ms执行一次

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

这里，throttle 函数确保滚动事件处理程序仅每 1000 毫秒执行一次，确保您的应用程序不会被淹没。

现实世界的例子

让我们将这些技术应用到更实际的环境中。假设您正在构建一个

React 应用程序，用户可以在搜索框中输入内容。您可以对输入事件进行去抖处理，以防止 API 调用淹没您的服务器。或者，如果您要跟踪用户在页面上滚动的距离，则可以使用限制来优化性能。

React 中的去抖动

从'react'导入{useState}； 函数搜索组件（）{ const [查询，setQuery] = useState(''); const handleSearch = debounce((值) => { // 使用值调用 API console.log('正在搜索：', value); }, 300); 返回 （ { setQuery(e.target.value); handleSearch(e.target.value); }} /> ）； }

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

限制滚动事件

从'react'导入{useEffect}； 函数 ScrollTracker() { 使用效果（（）=> { const handleScroll = 油门(() => { console.log('滚动...'); }, 1000); window.addEventListener('滚动',handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); return ; }

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

性能优化的最佳实践

去抖与节流：何时选择

这是一个快速的经验法则：

当您想要等到用户停止执行某些操作时，去抖是完美的选择。例如，在搜索栏中输入时。
当您想要确保随着时间的推移保持一致、定期执行时，限制效果最好。它非常适合滚动或调整窗口大小。

当您知道正在处理的事件类型及其触发频率时，您可以为工作选择正确的技术。

结论

控制JavaScript中的频繁事件对于优化性能至关重要，

去抖动和节流都提供了强大的解决方案。通过了解何时使用每种方法，您可以使您的 Web 应用程序更加流畅、响应更快，无论是处理搜索输入、调整窗口大小还是管理滚动事件。

下次当您发现您的应用程序因太多事件而陷入困境时，问问自己：

我应该去抖还是限制？你会很高兴你这么做了！

准备好尝试一下了吗？下次您处理项目时，请尝试一下这些技术。您会惊讶地发现一切都变得更加顺畅！