当前位置：首页 > news >正文

JavaScript防抖与节流全解析

news 来源：原创 2025/6/8 4:45:02

文章目录

- 前言：为什么需要防抖和节流
- 基本概念与区别
- - 防抖(Debounce)
  - 节流(Throttle)
  - 关键区别
- 防抖(Debounce)详解
- - 1. 基本防抖函数实现
  - 2. 防抖函数的使用
  - 3. 防抖函数的工作流程
  - 4. 防抖函数进阶 - 立即执行选项
- 节流(Throttle)详解
- - 1. 基本节流函数实现
  - - 时间戳法（第一次会立即执行）
    - 定时器法（第一次会延迟执行）
  - 2. 节流函数的使用
  - 3. 节流函数的工作流程
  - 4. 节流函数进阶 - 首尾调用控制
- 实际应用场景
- - 1. 搜索框输入防抖
  - 2. 滚动加载节流
  - 3. 按钮点击防抖（防止重复提交）
  - 4. 窗口调整大小节流
- 防抖与节流的进阶实现
- - 1. 可取消的防抖函数
  - 2. 可取消的节流函数
  - 3. 带返回值的防抖函数（使用Promise）
- 常见问题与解决方案
- - 1. 防抖函数内无法访问this和事件对象
  - 2. React组件中使用防抖/节流
  - 3. 函数依赖项变化时重置防抖/节流
- 第三方库的实现
- - 1. Lodash
  - 2. Underscore
  - 3. RxJS
- 总结与最佳实践
- - 1. 选择合适的技术
  - 2. 性能考虑
  - 3. 最佳实践
  - 4. 回顾关键概念
  - 2. 性能考虑
  - 3. 最佳实践
  - 4. 回顾关键概念

前言：为什么需要防抖和节流

在前端开发中，我们经常会遇到一些高频触发的事件，例如：

浏览器窗口调整大小（resize）
页面滚动（scroll）
鼠标移动（mousemove）
键盘输入（keyup、keydown）
频繁点击按钮等

如果不加控制，这些事件处理函数可能会在短时间内被频繁调用，导致以下问题：

性能问题：函数频繁执行，特别是复杂计算或DOM操作，会导致页面卡顿
资源浪费：例如输入搜索时，频繁发送不必要的API请求
不良用户体验：例如按钮重复点击导致的重复提交表单

看一个具体例子：

// 不做任何处理的搜索输入框
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', function() {// 每次输入都会执行，即使用户正在快速输入console.log('执行搜索:', this.value);fetchSearchResults(this.value); // 发送请求获取搜索结果
});

在上面的例子中，当用户快速输入"JavaScript"这个词时，可能会依次触发以下请求：

搜索"J"
搜索"Ja"
搜索"Jav"
搜索"Java"
搜索"JavaS"
…
搜索"JavaScript"

显然，除了最后一个请求，前面的所有请求都是不必要的，这不仅浪费了网络资源，还可能导致服务器压力过大。

这就是为什么我们需要防抖和节流技术：它们帮助我们控制函数的执行频率，优化性能和用户体验。

基本概念与区别

防抖(Debounce)

概念：函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

形象比喻：电梯关门 - 当有人进入电梯后，电梯会等待一段时间再关门，如果在这段时间内又有人进入，电梯会重新计时等待，直到一段时间内没有人进入才会关门。

典型场景：

搜索框输入，等用户输入完毕后再发送请求
窗口调整大小完成后执行重排重绘
按钮提交事件防止重复提交

节流(Throttle)

概念：函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

形象比喻：水龙头控制水流 - 无论你如何快速地多次拧开水龙头，水流速度都不会超过水管的限制。

典型场景：

滚动事件处理
射击游戏中的武器发射频率限制
鼠标移动事件处理

关键区别

特性	防抖(Debounce)	节流(Throttle)
执行时机	在一段时间内没有再次触发事件后执行	在一段时间内只执行一次
适用场景	需要等待操作完全结束后执行	需要保持一定的执行频率
执行频率	不稳定，取决于事件触发频率和间隔	稳定，保证一定时间内执行一次
最后一次是否执行	延迟执行，一定会执行	可能不会执行最后一次（取决于实现）

下面通过可视化图表来理解两者的区别：

连续事件触发：
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
│ │ │ │ │ │ │ │ │ │
0 1 2 3 4 5 6 7 8 9 (时间轴)防抖(延迟3秒):
─────────────────────→ (只在最后一次事件后等待3秒执行)↓9+3=12节流(间隔3秒):
↓       ↓       ↓     (每隔3秒执行一次)
│       │       │
0       3       6     (时间轴)

防抖(Debounce)详解

1. 基本防抖函数实现

/*** 基础版防抖函数* @param {Function} func - 需要防抖的函数* @param {number} wait - 等待时间，单位毫秒* @returns {Function} - 防抖处理后的函数*/
function debounce(func, wait) {let timeout;return function() {const context = this; // 保存this指向const args = arguments; // 保存传入的参数// 清除之前的定时器clearTimeout(timeout);// 设置新的定时器timeout = setTimeout(function() {func.apply(context, args);}, wait);};
}

2. 防抖函数的使用

// 定义一个可能频繁调用的函数
function handleSearch(searchTerm) {console.log('Searching for:', searchTerm);// 发送API请求等操作...
}// 获取输入框元素
const searchInput = document.getElementById('search-input');// 未使用防抖的版本 - 每次输入都会执行
/*
searchInput.addEventListener('input', function() {handleSearch(this.value);
});
*/// 使用防抖后的版本 - 停止输入300毫秒后才执行
const debouncedSearch = debounce(function() {handleSearch(this.value);
}, 300);searchInput.addEventListener('input', debouncedSearch);

3. 防抖函数的工作流程

以搜索框为例，当用户连续输入"hello"这个词：

时间轴: 0ms     100ms    200ms    300ms    400ms    700ms
操作:    h        e        l        l        o       (停止输入)
函数调用: 无       无       无       无       无        执行搜索"hello"

每次按键都会重置定时器，只有当用户停止输入300ms后，才会执行一次搜索。

4. 防抖函数进阶 - 立即执行选项

在某些场景下，我们可能希望第一次触发事件时立即执行函数，然后等待一段时间再允许执行下一次。例如点击提交按钮时，我们希望立即响应第一次点击，然后暂时禁用后续点击。

/*** 带立即执行选项的防抖函数* @param {Function} func - 需要防抖的函数* @param {number} wait - 等待时间，单位毫秒* @param {boolean} immediate - 是否立即执行* @returns {Function} - 防抖处理后的函数*/
function debounce(func, wait, immediate) {let timeout;return function() {const context = this;const args = arguments;const later = function() {timeout = null;if (!immediate) func.apply(context, args);};const callNow = immediate && !timeout;clearTimeout(timeout);timeout = setTimeout(later, wait);if (callNow) func.apply(context, args);};
}// 使用立即执行的防抖 - 第一次点击立即响应，后续点击被防抖
const button = document.getElementById('submit-button');
const immediateDebounceClick = debounce(function() {console.log('Button clicked!');// 提交表单等操作...
}, 1000, true);button.addEventListener('click', immediateDebounceClick);

节流(Throttle)详解

1. 基本节流函数实现

有两种常见的方式实现节流函数：时间戳法和定时器法。

时间戳法（第一次会立即执行）

/*** 时间戳实现的节流函数* @param {Function} func - 需要节流的函数* @param {number} wait - 等待时间，单位毫秒* @returns {Function} - 节流处理后的函数*/
function throttle(func, wait) {let previous = 0; // 上一次执行的时间戳return function() {const now = Date.now(); // 当前时间戳const context = this;const args = arguments;// 如果当前时间与上一次执行时间差大于等待时间if (now - previous > wait) {func.apply(context, args);previous = now;}};
}

定时器法（第一次会延迟执行）

JavaScript防抖与节流全解析

文章目录前言：为什么需要防抖和节流基本概念与区别防抖(Debounce)节流(Throttle)关键区别防抖(Debounce)详解1. 基本防抖函数实现2. 防抖函数的使用3. 防抖函数的工作流程4. 防抖函数进阶 - 立即执行选项节流(Throttle)详解1. 基本节流函数实现时间戳法（第一次会立即执行）定…...

编程日记 2025/5/26 18:13:39

大模型学习：Deepseek+dify零成本部署本地运行实用教程（超级详细！建议收藏）

文章目录大模型学习：Deepseekdify零成本部署本地运行实用教程（超级详细！建议收藏）一、Dify是什么二、Dify的安装部署1. 官网体验2. 本地部署2.1 linux环境下的Docker安装2.2 Windows环境下安装部署DockerDeskTop2.3启用虚拟机平台…...

编程日记 2025/5/27 3:46:27

在RK3588上使用NCNN和Vulkan加速ResNet50推理全流程

在RK3588上使用NCNN和Vulkan加速ResNet50推理全流程前言：为什么需要关注移动端AI推理一、环境准备与框架编译1.1 获取NCNN源码1.2 安装必要依赖1.3 编译NCNN二、模型导出与转换2.1 生成ONNX模型2.2 转换NCNN格式三、模型量化加速3.1 生成校准数据3.2 执行量化操作四、性能测试…...

编程日记 2025/5/25 11:49:37

Web安全基础：深度解析与实战指南

一、Web安全体系架构的全面剖析 1.1 分层防御模型（Defense in Depth） 1.1.1 网络层防护防火墙技术：状态检测防火墙（SPI）：基于连接状态跟踪，阻断非法会话（如SYN Flood攻击）下一代防火墙（NGFW）：集成IPS、AV、URL过滤（如Palo Alto PA-5400系列）配置示例…...

编程日记 2025/5/29 16:34:49

Uniapp开发鸿蒙应用时如何运行和调试项目

经过前几天的分享，大家应该应该对uniapp开发鸿蒙应用的开发语法有了一定的了解，可以进行一些简单的应用开发，今天分享一下在使用uniapp开发鸿蒙应用时怎么运行到鸿蒙设备，并且在开发中怎么调试程序。运行 Uniapp项目支持运行到…...

编程日记 2025/5/27 5:04:02

Python海龟绘图（Turtle Graphics）核心函数和关键要点

以下是Python海龟绘图（Turtle Graphics）的核心函数和关键要点整理： 一、画布设置函数/方法说明参数说明备注turtle.setup(width, height, x, y)设置画布尺寸和位置width宽度，height高度，x/y窗口左上角坐标默认尺寸80…...

编程日记 2025/5/29 13:02:36

如何在Cursor中高效使用MCP协议

1、Cursor介绍 Cursor是一个功能强大的开发工具，内置了聊天助手、代码自动补全和调试工具，能够与多种外部工具和服务（如数据库、文件系统、浏览器等）进行深度集成。借助MCP（Multiverse Communication Protocol&#x…...

编程日记 2025/5/29 17:42:40

典籍知识问答模块AI问答bug修改

一、修改流式数据处理问题 1.问题描述：由于传来的数据形式如下： event:START data:350 data:< data:t data:h data:i data:n data:k data:> data: data: data: data: data:嗯 data:， 导致需要修改获取正常的当前信息id并更…...

编程日记 2025/5/23 19:45:17

Redis 发布订阅模式深度解析：原理、应用与实践

在现代分布式系统架构中，实时消息传递机制扮演着至关重要的角色。Redis 作为一款高性能的内存数据库，其内置的发布订阅(Pub/Sub)功能提供了一种轻量级、高效的消息通信方案。本文将全面剖析 Redis 发布订阅模式，从其基本概念、工作原理到实际…...

编程日记 2025/6/1 9:07:23

通义千问-langchain使用构建（三）

目录序言docker 部署xinference1WSL环境docker安装2拉取镜像运行容器3使用的界面本地跑chatchat1rag踩坑2使用的界面2.1配置个前置条件然后对话2.2rag对话结论序言在前两天的基础上，将xinference调整为wsl环境，docker部署。然后langchain chatcha…...

编程日记 2025/5/27 8:03:37

c++ 仿函数

示例代码： void testFunctor() {using Sum struct MyStruct {int operator() (int a, int b) const { // 重载（）运算符return a b;}};Sum sum;std::cout << sum(9528, -1) << std::endl; } 打印： 仿函数意思是&am…...

编程日记 2025/5/25 12:50:03

hyper-v 虚拟机怎么克隆一台一样的虚拟机？

环境： hyper-v Win10专业版问题描述： hyper-v 虚拟机怎么克隆一台一样的虚拟机？ 解决方案： 以下是在 Hyper-V 中克隆虚拟机的几种方法： 方法一：使用导出和导入功能导出虚拟机： 打开 H…...

编程日记 2025/6/1 12:34:07

操作系统：os概述

操作系统：OS概述程序、进程与线程无极二级目录三级目录程序、进程与线程指令执行需要那些条件？CPU内存需要数据和无极二级目录三级目录...

编程日记 2025/5/26 6:44:57

【技巧】GoogleChrome浏览器开发者模式查看dify接口

回到目录 GoogleChrome浏览器开发者模式查看dify接口 1.搭建本地dify开发环境参考《 win10的wsl环境下调试dify的api后端服务(20250511发布)》 2.打开dify首页，进入开发者模式，Network页勾选 Preserve log [图1] 3.填好用户名和密码，…...

编程日记 2025/5/31 6:41:24

Ocean: Object-aware Anchor-free Tracking

领域：Object tracking It aims to infer the location of an arbitrary target in a video sequence, given only its location in the first frame 问题/现象： Anchor-based Siamese trackers have achieved remarkable advancements in accuracy, yet…...

编程日记 2025/5/29 11:40:36

java中的循环结构

文章目录流程控制顺序结构if单选择结构if双选择结构if多选择结构嵌套的if结构switch多选择结构循环结构while循环do...while循环 for循环增强for循环 break continue练习案例流程控制顺序结构 java的基本结果就是顺序结构，除非特别指明，否则就按照…...

编程日记 2025/5/29 21:21:49

数学复习笔记 16

前言例题真是经典。 background music 《青春不一样》 2.28 算一个行列式，算出来行列式不等于零，这表示矩阵式可逆的。但是这个算的秩是复合的，感觉没啥好办法了，我直接硬算了，之后再看解析积累好的方法。算矩阵…...

编程日记 2025/5/28 16:45:03

PySide6 GUI 学习笔记——常用类及控件使用方法（常用类颜色QColor）

文章目录一、概述二、核心功能三、常用函数及方法四、代码示例五、注意事项一、概述 QColor 是用于处理颜色的类，支持 RGB、HSV、HSL、CMYK 等多种颜色模型，提供颜色创建、转换、分量操作及格式转换功能。支持透明度设置，可通过颜色名称或…...

编程日记 2025/6/4 17:03:55

【Closure-Hayd】

RNA序列本身存在结构上的物理信息，因此可以利用文献提供的相关方法来对RNA序列的物理特征进行更加细致的提取。几何向量编码（GVP模块）借鉴Rhodesign模型中的GVP（Geometric Vector Perceptron）模块，将每个…...

编程日记 2025/5/24 0:47:17

MySQL高可用架构

一、读写分离在高可用架构中的核心作用 1.读写分离与高可用的协同价值在MySQL高可用架构中，读写分离不仅是性能优化的手段，更是提升系统容错能力的关键策略。通过将写操作（INSERT、UPDATE、DELETE） 集中到主节点，读…...

编程日记 2025/6/4 15:10:04

粒子群算法（PSO算法）

粒子群算法概述 1.粒子群优化算法（Particle Swarm Optimization，简称PSO）。粒子群优化算法是在1995年由Kennedy博士和Eberhart博士一起提出的，它源于对鸟群捕食行为的研究。 2.基本核心是利用群体中的个体对信息的共享从而使得整…...

编程日记 2025/6/4 17:10:43

信道编码技术介绍

信息与通信系统中的编码有4 种形式：信源编码、信道编码、密码编码和多址编码。其中信道编码的作用是对信源经过压缩后的数据加一定数量受到控制的冗余，使得数据在传输中或接收中发生的差错可以被纠正或被发现，从而可以正确恢复出原始数据信息…...

编程日记 2025/5/26 10:52:25

JavaScript【4】数组和其他内置对象(API)

1.数组: 1.概述: js中数组可理解为一个存储数据的容器,但与java中的数组不太一样;js中的数组更像java中的集合,因为此集合在创建的时候,不需要定义数组长度,它可以实现动态扩容;js中的数组存储元素时,可以存储任意类型的元素,而java中的数组一旦创建后,就只能存储定义类型的元…...

编程日记 2025/5/27 15:27:43

【背包dp-----分组背包】------（标准的分组背包【可以不装满的最大价值】）

通天之分组背包题目链接题目描述自 01 01 01 背包问世之后，小 A 对此深感兴趣。一天，小 A 去远游，却发现他的背包不同于 01 01 01 背包，他的物品大致可分为 k k k 组，每组中的物品相互冲突，现在&a…...

编程日记 2025/5/25 20:21:34

docker-compose——安装mongo

编写docker-compose.yml version : 3.8services:zaomeng-mongodb:container_name: zaomeng-mongodbimage: mongo:latestrestart: alwaysports:- 27017:27017environment:- MONGO_INITDB_ROOT_USERNAMEroot- MONGO_INITDB_ROOT_PASSWORDpssw0rdvolumes:- ./mongodb/data:/data/…...

编程日记 2025/6/1 9:11:45