【JavaScript】使用 Lodash 优化性能：防抖与节流详解

引言

在前端开发中，高频触发的事件（如窗口调整、输入搜索、滚动监听等）可能导致回调函数频繁执行，进而引发性能问题甚至页面卡顿。Lodash作为JavaScript实用工具库，提供了 防抖（debounce） 和 节流（throttle） 两大核心函数，帮助我们优雅地控制函数执行频率。本文将通过概念解析、代码示例和场景分析，带你掌握它们的用法与区别。

一、防抖（Debounce）

核心概念

防抖的核心思想是：在连续触发事件时，只有在最后一次操作结束后的等待时间内不再有新事件，才会执行函数。通俗来说，防抖会“等待用户停止操作后再执行”。

适用场景

• 实时搜索输入（避免每次输入都请求接口）
• 窗口调整（resize事件）
• 表单验证（用户停止输入后再校验）

基础用法

import {
   
    debounce } from "lodash";

// 定义需要防抖的函数
const searchAPI = () => {
   
   
  console.log("发起搜索请求...");
};

// 防抖包装：等待用户停止输入500ms后再执行
const debouncedSearch = debounce(searchAPI