JavaScript性能优化利器：全面解析防抖（Debounce）与节流（Throttle）技术、应用场景及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略

JINGWHALE 对文章相关未知以及已知概念、定理、公式、图片等内容感悟、分析、创新、创造等拥有作品著作权。

本文链接：https://blog.csdn.net/u012347650/article/details/138365613

本文介绍了JavaScript中的防抖和节流技术，用于优化高频率事件处理。防抖确保事件延迟执行，节流限制函数执行频率。文章详细讲解了原理、应用场景、示例代码以及使用成熟的第三方库如lodash和RxJS的实践方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

JavaScript中的防抖（Debounce）与节流（Throttle）是用来优化高频率事件处理的策略。防抖确保事件触发后一定延迟内不再触发，才执行函数，适用于如搜索框输入、窗口调整等，可减少不必要的计算或请求。节流则是指在固定时间间隔内，无论事件触发多少次，都只执行一次处理函数，保证执行频率，适用于滚动事件、动画控制等场景，维持操作流畅性。简言之，防抖减少连续触发，节流控制执行频率。

一、JavaScript 防抖（Debounce）详解

概念：
防抖技术是一种编程技巧，用于限制某个函数在一定时间内只能执行一次。它特别适用于处理那些可能会因为连续触发而产生大量重复执行的事件，例如窗口调整大小、输入框内容变化、按钮点击等。防抖的核心思想是：当事件被触发时，并不立即执行函数，而是等待一个特定的延迟时间，如果在这个延迟时间内事件又被触发了，则重新开始计时，直到延迟时间结束后才真正执行函数。

应用场景：

搜索框的实时搜索建议：防止用户输入过程中频繁发送请求。
窗口大小调整时的重绘操作：避免因窗口频繁调整而持续触发重排重绘，影响性能。
按钮防连击：确保按钮不会因为用户快速连续点击而多次触发同一动作。

示例代码：

下面是一个简单的防抖函数实现及其使用示例：

function debounce(func, delay) {
    let timeoutId; // 用于存储定时器的引用

    // 返回一个新的函数作为防抖处理后的函数
    return function(...args) {
        // 当事件触发时，清除之前的延时调用
        clearTimeout(timeoutId);

        // 设置新的延时调用
        timeoutId = setTimeout(() => {
            // 在延迟时间结束后执行原始函数
            func.apply(this, args);
        }, delay);
    };
}

// 使用防抖函数的例子：优化搜索框的实时搜索功能
function performSearch(query) {
    console.log(`Searching for: "${query}"`);
    // 这里实际应执行搜索请求等操作
}

// 创建防抖版本的search函数
const debouncedSearch = debounce(performSearch, 300); // 300毫秒内连续输入不触发搜索

// 假设这是输入框的onChange事件处理器
document.getElementById('searchInput').addEventListener('input', function(event) {
    const query = event.target.value;
    debouncedSearch(query); // 使用防抖处理后的函数
});

在这个示例中，debounce函数接收两个参数：要防抖的函数func和延迟时间delay。当用户在搜索框中输入时，debouncedSearch函数会被调用，但只有在用户停止输入一段时间（这里是300毫秒）后，真正的搜索逻辑才会执行，从而避免了因连续输入导致的频繁搜索请求。

二、JavaScript 节流（Throttle）详解

概念：
节流技术也是一种编程技巧，用于控制函数的执行频率，确保函数在给定的时间间隔内只执行一次。与防抖不同，节流保证了在固定时间间隔内至少执行一次函数，即使在这段时间内事件被频繁触发。节流常用于处理滚动事件、拖拽操作等，以避免因高频事件导致的性能问题。

应用场景：

滚动事件监听：当用户滚动页面时，只希望每隔一段时间处理一次滚动位置更新，而不是每次像素变化都处理。
自动保存功能：在编辑文档时，为了减少服务器负担，每隔一段时间自动保存一次，而不是每次按键都保存。

示例代码：

下面是一个基础的节流函数实现及其使用示例：

function throttle(func, limit) {
    let inThrottle; // 用来标记函数是否处于节流状态
    let lastFunc; // 用于存储上一次的参数和执行上下文

    // 返回一个新的函数作为节流处理后的函数
    return function(...args) {
        const context = this;

        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => {
                inThrottle = false;
                // 如果在延迟期间有新的调用，这里会再次执行func
                if (lastFunc) {
                    throttle.apply(context, lastFunc);
                    lastFunc = undefined;
                }
            }, limit);
        } else {
            // 保存本次调用的信息，待节流结束后执行
            lastFunc = [context, args];
        }
    };
}

// 使用节流函数的例子：优化滚动事件处理
function handleScroll() {
    console.log("Handling scroll event");
    // 这里实际应执行滚动相关的处理逻辑
}

// 创建节流版本的scroll处理函数，每1000毫秒最多执行一次
const throttledScroll = throttle(handleScroll, 1000);

// 绑定滚动事件
document.addEventListener('scroll', throttledScroll);

在这个示例中，throttle函数确保handleScroll函数在每1000毫秒内最多被执行一次，即便滚动事件在此期间被频繁触发。如果在限制时间内又有新的滚动事件，这些事件会被暂存，在上一次执行完成后立即执行（如果有积压的话），这样既保证了执行效率，又不会遗漏任何一次触发。

三、使用成熟的库

尽管手动实现防抖和节流函数并不复杂，但使用成熟的第三方库（如lodash的_.debounce和_.throttle）可以简化代码并减少潜在的错误。这些库通常经过广泛测试，支持更多高级选项和更好的性能优化。

常用第三方库包括：

Lodash: Lodash提供了_.debounce和_.throttle函数，它们是实现防抖和节流功能的流行选择，使用简单且功能强大。
RxJS: 在 ReactiveX 库中，尤其是用于JavaScript的RxJS，提供了操作符如debounceTime和throttleTime，这些操作符基于Observables，非常适合复杂异步和事件处理场景。
Vue.js和React的实用库: 在Vue和React等前端框架中，也有专门的库或直接在框架的方法集中提供防抖和节流功能，例如Vue的@vueuse/core库包含了防抖和节流的Hook。
Underscore.js: 如果项目规模不大，且主要需要基本的实用功能，追求代码的简洁和轻量级，Underscore.js是一个很好的选择。Underscore.js 本身作为一个整体库提供，并不直接支持像Lodash那样官方提供的按需加载或模块化构建功能。

使用这些第三方库，开发者无需从头编写防抖和节流的逻辑，只需引入相应的方法，并根据需求配置参数即可高效地优化应用性能。

1. Lodash库中的防抖（debounce）和节流（throttle）

Lodash 是一个流行的JavaScript实用函数库，其中包含了强大的防抖和节流功能，能够帮助开发者轻松优化事件处理逻辑。

防抖（debounce）

_.debounce(func, [wait=0], [options={}]) 创建并返回一个防抖过的函数，该函数在最后一次调用后的 wait 毫秒后执行。如果在等待期间被再次调用，则重新计时。

示例：

import { debounce } from 'lodash';

function logValue(value) {
  console.log(`Current value: ${value}`);
}

const debouncedLog = debounce(logValue, 300);

// 假设这是输入框的onChange事件处理器
document.getElementById('inputBox').addEventListener('input', function(event) {
  const inputValue = event.target.value;
  debouncedLog(inputValue); // 使用防抖处理后的函数
});

节流（throttle）

_.throttle(func, [wait=0], [options={}]) 创建并返回一个节流过的函数，该函数保证 wait 毫秒内至少执行一次，如果在这段时间内又被调用，则不会执行。

示例：

import { throttle } from 'lodash';

function handleScroll() {
  console.log("Handling scroll event");
  // 实际滚动处理逻辑
}

const throttledHandleScroll = throttle(handleScroll, 200);

// 绑定滚动事件
window.addEventListener('scroll', throttledHandleScroll);

2. RxJS中的防抖(debounceTime)和节流(throttleTime)

RxJS 是一个用于处理异步数据流的库，适用于Reactive Programming。它提供了操作符来实现防抖和节流。

防抖(debounceTime)

.debounceTime(dueTime, [scheduler]) 在源Observable发出的每个项目之间等待指定的时间，然后仅发出最近的那个项目。

节流(throttleTime)

.throttleTime(duration, [scheduler], [config]) 在规定的持续时间duration内，只让第一个值通过，忽略后续值，直到下一个周期开始。

示例（RxJS）:

import { fromEvent } from 'rxjs';
import { debounceTime, throttleTime } from 'rxjs/operators';

// 防抖示例
fromEvent(document, 'keyup')
  .pipe(debounceTime(300))
  .subscribe(event => console.log('Keyup event debounced:', event.key));

// 节流示例
fromEvent(window, 'scroll')
  .pipe(throttleTime(200))
  .subscribe(() => console.log('Scroll event throttled'));

3. @vueuse/core Composition API Hooks

Vue的@vueuse/core库提供了一系列实用的Composition API Hooks，其中包括用于防抖（debounce）和节流（throttle）的Hook，可以帮助开发者更方便地处理高频触发的事件，如用户输入、滚动等，从而优化性能和用户体验。

防抖（debounce）

useDebounceFn Hook 可以将任何函数转换为防抖函数。这意味着在用户停止操作一段时间后，该函数才会执行，有助于减少不必要的计算或网络请求。

示例:

import { useDebounceFn } from '@vueuse/core';

export default {
  setup() {
    const search = (query) => {
      console.log(`Searching for: "${query}"`);
      // 这里可以执行实际的搜索逻辑
    };

    // 创建一个防抖的search函数，延迟时间为500毫秒
    const debouncedSearch = useDebounceFn(search, 500);

    return {
      debouncedSearch,
    };
  },
};

在模板中使用这个防抖函数:

<template>
  <input v-model="searchQuery" @input="debouncedSearch(searchQuery)">
</template>

节流（throttle）

useThrottleFn Hook 则用于创建一个节流函数，确保函数在指定的时间间隔内最多执行一次，适用于需要控制执行频率的场景。

示例:

import { useThrottleFn } from '@vueuse/core';

export default {
  setup() {
    const handleScroll = () => {
      console.log('Scroll position updated');
      // 实际的滚动处理逻辑
    };

    // 创建一个节流的handleScroll函数，间隔时间为200毫秒
    const throttledHandleScroll = useThrottleFn(handleScroll, 200);

    // 假设这是绑定到窗口滚动事件的处理函数
    window.addEventListener('scroll', throttledHandleScroll);

    // 记得在组件卸载时移除事件监听器
    onUnmounted(() => {
      window.removeEventListener('scroll', throttledHandleScroll);
    });

    return {};
  },
};

注意事项

使用这些Hooks时，确保导入正确的库并按照Vue 3的Composition API规则组织代码。
当组件卸载时，如果在setup函数中绑定了事件监听器，记得使用onUnmounted生命周期钩子来清理，以避免内存泄漏。
可以根据具体需求调整防抖和节流的延迟时间，以达到最佳的性能和用户体验平衡。

4、Underscore.js

Underscore.js是一个JavaScript实用库，提供了许多有用的函数来处理数组、集合、对象以及函数等功能。在处理事件或函数频繁触发的场景时，Underscore提供了_.debounce和_.throttle两个函数，分别用来实现防抖和节流。

防抖（debounce）示例

import _ from 'underscore';

function updateSearchResults(query) {
  console.log(`Searching for: "${query}"`);
  // 实际搜索逻辑
}

const debouncedUpdateSearchResults = _.debounce(updateSearchResults, 300);

// 假设这是输入框的onChange事件处理器
document.getElementById('searchInput').addEventListener('input', function(event) {
  const query = event.target.value;
  debouncedUpdateSearchResults(query);
});

节流（throttle）示例

import _ from 'underscore';

function handleScroll() {
  console.log('Handling scroll event');
  // 实际滚动处理逻辑
}

const throttledHandleScroll = _.throttle(handleScroll, 200);

// 绑定滚动事件
window.addEventListener('scroll', throttledHandleScroll);