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

【如何实现 JavaScript 的防抖和节流?】

如何实现 JavaScript 的防抖和节流?

前言

防抖(Debounce)和节流(Throttle)是 JavaScript 中优化高频事件处理的两种常用技术。它们可以有效减少事件处理函数的调用次数,提升性能并改善用户体验。本文将详细介绍防抖和节流的实现原理及其应用场景。


关键词

JavaScript、防抖、节流、高频事件、性能优化、事件处理、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实践


一、防抖(Debounce)

1.1 防抖的定义

防抖是指在事件被触发后,等待一定时间(如 300ms)再执行事件处理函数。如果在等待时间内事件再次被触发,则重新计时。

1.2 防抖的实现

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

1.3 防抖的应用场景
搜索框输入:在用户停止输入后再发起搜索请求。

窗口调整大小:在用户停止调整窗口大小后再重新计算布局。

二、节流(Throttle)

2.1 节流的定义
节流是指在一定时间间隔内(如 300ms),事件处理函数最多执行一次。无论事件触发频率多高,都会按照固定的时间间隔执行。

2.2 节流的实现

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

2.3 节流的应用场景
滚动事件:在页面滚动时,每隔一定时间执行一次事件处理函数。

鼠标移动:在鼠标移动时,每隔一定时间执行一次事件处理函数。

三、防抖和节流的区别

3.1 执行时机
防抖:在事件停止触发后执行。

节流:在事件触发过程中按照固定时间间隔执行。

3.2 适用场景
防抖:适用于事件触发频率高但只需在事件停止后执行一次的场景。

节流:适用于事件触发频率高但需要按照固定频率执行的场景。

结语

防抖和节流是 JavaScript 中优化高频事件处理的两种重要技术。理解它们的实现原理和适用场景,可以帮助开发者编写出更加高效和用户友好的代码。通过合理使用防抖和节流,可以显著提升应用的性能和用户体验。

相关文章:

【如何实现 JavaScript 的防抖和节流?】

如何实现 JavaScript 的防抖和节流? 前言 防抖(Debounce)和节流(Throttle)是 JavaScript 中优化高频事件处理的两种常用技术。它们可以有效减少事件处理函数的调用次数,提升性能并改善用户体验。本文将详…...

C#中File类的Copy()方法或FileInfo类的CopyTo()方法的参数overwrite取false和true的区别

当调用 System.IO.File.Copy 方法时,第三个参数 overwrite 控制着如果目标位置已经存在同名文件的情况下如何处理。 1、当 overwrite 设置为 true 在这种情况下,即使目标路径下已经有相同名称的文件,该方法也会无条件地覆盖现有的文件。这不…...

力扣 买卖股票的最佳时机

贪心算法典型例题。 题目 做过股票交易的都知道,想获取最大利润,就得从最低点买入,最高点卖出。这题刚好可以用暴力,一个数组中找到最大的数跟最小的数,然后注意一下最小的数在最大的数前面即可。从一个数组中选两个数…...

蚁剑(AutSword)的下载安装与报错解决

蚁剑(AutSword)的下载安装与报错解决 1.下载 唯一官方github下载地址 GitHub - AntSwordProject/AntSword-Loader: AntSword 加载器 2.安装 打开并且进入到下面的界面 下载需要的的版本 进行初始化 3.报错 出现下面的报错 4.解决方法 出现上面报错…...

【全栈开发】----Mysql基本配置与使用

本篇是在已下载Mysql的情况下进行的,若还未下载或未创建Mysql服务,请转到这篇: 2024 年 MySQL 8.0.40 安装配置、Workbench汉化教程最简易(保姆级)_mysql8.0.40下载安装教程-CSDN博客 本文对于mysql的操作均使用控制台sql原生代码…...

Spring Boot项目的基本设计步骤和相关要点介绍

以下是一个关于Spring Boot项目的基本设计步骤和相关要点介绍,我们以一个简单的示例应用——员工管理系统为例进行说明: 一、项目概述 员工管理系统旨在实现对公司员工信息的有效管理,包括员工基本信息录入、查询、更新以及删除等功能。通过Spring Boot框架来快速搭建后端…...

【Spring快速入门】不断更新...

一、Java基础 1、注解 1.3、自定义注解 springboot项目中自定义注解的使用总结、java自定义注解实战(常用注解DEMO)_springboot在类或者方法上加自定义注解-CSDN博客 同平台的新林。大佬就总结的很好,最近写得项目利用aop切面编程中的Aut…...

nodejs版本管理,使用 nvm 删除node版本,要删除 Node.js 的某个版本详细操作

要删除 Node.js 的某个版本并保持 Node Version Manager (nvm) 的管理整洁,可以按以下步骤操作: 步骤 1:查看已安装的 Node.js 版本 nvm ls这会列出你通过 nvm 安装的所有 Node.js 版本。输出类似于: -> v18.17.1v16.20…...

HTML之JavaScript DOM(document)编程处理事件

HTML之JavaScript DOM&#xff08;document&#xff09;编程处理事件 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

5.【线性代数】—— 转置,置换和向量空间

五 转置&#xff0c;置换和向量空间 1. 置换矩阵2. 转置矩阵3. 对称矩阵4. 向量空间4.1 向量空间4.2 子空间 1. 置换矩阵 定义&#xff1a; 用于行互换的矩阵P。 之前进行ALU分解时&#xff0c;可能存在该行主元为0&#xff0c;要进行行互换&#xff0c;即PALU 性质&#xff1…...

移动通信发展史

概念解释 第一代网络通信 1G 第二代网络通信 2G 第三代网络通信 3G 第四代网络通信 4G 4g网络有很高的速率和很低的延时——高到500M的上传和1G的下载 日常中的4G只是用到了4G技术 运营商 移动-从民企到国企 联通-南方教育口有人 电信 铁通&#xff1a;成立于 2000 年…...

Python MoviePy 视频处理全攻略:从入门到实战案例

第1章 环境安装与配置 # 案例1&#xff1a;安装MoviePy及FFmpeg !pip install moviepy # Windows安装FFmpeg&#xff1a;https://ffmpeg.org/download.html # Linux: sudo apt-get install ffmpeg# 验证安装 from moviepy.editor import * print("MoviePy版本:", __…...

uniapp webview嵌入外部h5网页后的消息通知

最近开发了个oa系统&#xff0c;pc端的表单使用form-create开发&#xff0c;form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。移动端使用uniapp开发&#xff0c;但是因为form-create移动端只支持vant&#xff0c;不支持uniapp。官…...

macos安装jmeter测试软件

java环境安装 a. 验证安装环境 java -version # 如果有版本信息&#xff0c;说明已安装 b. 安装jdk # 安装 Homebrew&#xff08;如未安装&#xff09; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" # 安装 O…...

【virtiofs】ubuntu24.04+qemu7.0调试virtiofs

文章目录 编译qemu编译buildroot编译linux-6.8.1编译virtiofsd启动脚本qemu调试方法环境: win11 + vmware17 ubuntu24.04 buildroot git clone git://git.busybox.net/buildroot linux-6.8.1 https://mirrors.edge.kernel.org/pub/linux/kernel/v6.x/linux-6.8.1.tar.gz virti…...

DeepSeek 和 ChatGPT 在特定任务中的表现:逻辑推理与创意生成

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux网络编程 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 ​ Linux网络编程笔记&#xff1a; https://blog.cs…...

MoE硬件部署

文章目录 MoE硬件部署硬件需求**专家硬件映射&#xff1a;模块化计算单元****路由硬件加速&#xff1a;门控网络专用单元****内存与通信优化****能效控制策略****实例&#xff1a;假设部署Mixtral 8x7B到自研AI芯片** 资源分配硬件资源预分配&#xff08;编译时&#xff09;运行…...

MYSQL中的性能调优方法

MySQL性能调优是数据库管理的重要工作之一&#xff0c;目的是通过调整系统配置、优化查询语句、合理设计数据库架构等方法&#xff0c;提高数据库的响应速度和处理能力。以下是常见的MySQL性能调优方法&#xff0c;结合具体的案例进行说明。 1. 优化查询语句 查询语句是数据库…...

Day48(补)【AI思考】-设计模式三大类型统一区分与记忆指南

文章目录 设计模式三大类型统一区分与记忆指南**一、创建型模式&#xff08;对象如何生&#xff1f;&#xff09;****二、结构型模式&#xff08;对象如何组&#xff1f;&#xff09;****三、行为型模式&#xff08;对象如何动&#xff1f;&#xff09;****1. 行为型类模式&…...

公牛充电桩协议对接单车汽车平台交互协议外发版

充电设备与平台交互协议-外发版 V1.0.0.05 1 充电设备与平台交互协议 &#xff08;外发版&#xff09; 充电设备与平台交互协议-外发版 V1.0.0.05 2 版本 版本日期 修改人 版本说明 1.0.0.00 2022.05.05 研发部 外发初版 1.0.0.01 2022.08.26 研发部 0x32 增加鉴权参数 0x34 增…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...