使用lodash库实现防抖和节流

在 JavaScript 中,lodash 是一个非常流行的实用工具库,提供了许多常用的函数,其中就包括防抖节流的实现。lodash 提供的 debouncethrottle 函数可以让我们更方便地实现这两种功能。

1. 使用 lodashdebounce(防抖)函数

lodashdebounce 函数可以帮助我们在用户停止操作一段时间后才触发事件。它的使用方式非常简洁。

示例:搜索框输入防抖

在这个示例中,我们希望用户在输入框中停止输入 500 毫秒后才执行搜索操作,避免频繁请求。

<input type="text" id="search" placeholder="Search..."><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>// 假设这是一个执行搜索操作的函数function performSearch(query) {console.log('Searching for:', query);// 这里可以发送 ajax 请求进行搜索}// 使用 lodash 的 debounce 函数const debouncedSearch = _.debounce(function(event) {performSearch(event.target.value);}, 500);  // 500ms 的防抖时间// 监听输入框的输入事件document.getElementById('search').addEventListener('input', debouncedSearch);
</script>
  • 解释
    • 当用户输入时,debouncedSearch 函数会被连续调用,但只有当用户停止输入超过 500 毫秒时,performSearch 函数才会执行一次。
    • 防止在每次键盘输入时都发起请求,优化了性能。

2. 使用 lodashthrottle(节流)函数

lodashthrottle 函数允许我们在规定的时间间隔内最多执行一次事件处理函数,即使在这段时间内事件被多次触发。

示例:滚动事件节流

在这个示例中,我们希望当用户滚动页面时,每隔 1 秒才记录一次滚动事件,避免频繁触发回调函数。

<div style="height: 2000px;">Scroll down to see the effect</div><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>// 这是一个处理滚动事件的函数function handleScroll() {console.log('Scroll event detected at:', new Date().toLocaleTimeString());}// 使用 lodash 的 throttle 函数,每隔 1 秒最多触发一次const throttledScroll = _.throttle(handleScroll, 1000);// 监听滚动事件window.addEventListener('scroll', throttledScroll);
</script>
  • 解释
    • 当用户滚动页面时,throttledScroll 函数会在 1 秒内最多触发一次,避免滚动时回调函数被频繁调用。
    • 这优化了页面滚动的性能,特别是在回调函数较为复杂时。

3. 防抖和节流的高级用法

lodashdebouncethrottle 函数还支持一些高级选项,可以灵活控制事件的执行时机。例如:

  • leading:是否在开始时立即执行函数。
  • trailing:是否在停止触发后再执行函数。
示例:结合 leadingtrailing 选项

假设我们希望在用户第一次触发事件时立即执行函数,并在停止触发 1 秒后再次执行。

<input type="text" id="input-field" placeholder="Type something..."><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>// 假设这是一个处理输入的函数function handleInput(value) {console.log('Input value processed:', value);}// 使用 debounce 函数,并配置 leading 和 trailing 选项const debouncedInput = _.debounce(function(event) {handleInput(event.target.value);}, 1000, { leading: true, trailing: true });// 监听输入框的输入事件document.getElementById('input-field').addEventListener('input', debouncedInput);
</script>
  • 解释
    • leading: true:用户开始输入时,立即执行 handleInput 函数。
    • trailing: true:用户停止输入 1 秒后,再次执行 handleInput 函数。
    • 这样我们既可以在输入时立即响应,又可以在用户停止输入后执行最后一次处理。

4. 总结

  • 防抖(Debounce)

    • 在短时间内频繁触发时,只有最后一次操作才执行。
    • 适合场景:输入框搜索、窗口大小调整等。
  • 节流(Throttle)

    • 在一定时间间隔内保证事件只触发一次,无论事件多频繁。
    • 适合场景:页面滚动、按钮点击、鼠标移动等。

使用 lodashdebouncethrottle 函数,不仅简化了代码,还提高了应用性能和可维护性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/54793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【6】AT32F437 OpenHarmony轻量系统移植教程(3)

开源地址&#xff1a;https://gitee.com/AT32437_OpenHarmony 学习本文档的意义 1.学习移植OpenHarmony轻量系统到AT32全系列mcu上&#xff0c;本文档移植的具体型号为AT32F437ZMT7 2.学习OpenHarmony轻量系统开发 6.target_config.h文件适配 在//kernel/liteos_m/kernel/…

秋招喜来,分享一份最新的面经

&#x1f4bc;岗位职责&#xff1a; 负责后端服务的开发与维护&#xff1b;技术预研和技术难点攻关&#xff0c;保障系统可用性、稳定性、和可扩展性&#xff1b;持续优化系统架构设计&#xff0c;提出问题解决方案。 &#x1f4cb;任职要求&#xff1a; 计算机或相关专业&a…

分拆逆势上会,兴福电子部分专利来自母公司,独立性被拷问

作者&#xff1a;Cindy 来源&#xff1a;IPO魔女 公司拟募集资金12.10亿元&#xff0c;保荐机构为天风证券。兴福电子2023年5月就提交了上市申请&#xff0c;期间经历了2轮问询&#xff0c;一年多时间就开启上会。 然而值得注意的是&#xff0c;兴福电子属于分拆上市&#xff…

亚马逊IP关联揭秘:发生ip关联如何处理

在亚马逊这一全球领先的电商平台上&#xff0c;IP关联是一个不可忽视的问题&#xff0c;尤其是对于多账号运营的卖家而言。本文将深入解析亚马逊IP关联的含义、影响以及应对策略&#xff0c;帮助卖家更好地理解和应对这一问题。 什么是亚马逊IP关联&#xff1f; 亚马逊IP关联…

Java高级Day51-apacheDBUtils

136.ApDBUtils 基本介绍 commons-dbutils 是 Apache 组织提供的一个开源JDBC工具类库&#xff0c;它是对JJDBC的封装&#xff0c;使用dbutils能极大简化jdbc编码的工作量 QueryRunner类&#xff1a;该类封装了SQL的执行&#xff0c;是线程安全的。可以实现增删改查和批处理 …

【最新华为OD机试E卷-支持在线评测】字符串变换最小字符串(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ,一枚热爱算法的程序员 💻 ACM金牌🏅️团队 | 大厂实习经历 | 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…

MySQL练手题--日期连续类型(困难)

一、准备工作 Create table If Not Exists Failed (fail_date date); Create table If Not Exists Succeeded (success_date date); Truncate table Failed; insert into Failed (fail_date) values (2018-12-28); insert into Failed (fail_date) values (2018-12-29); inser…

map的使用

pair类型介绍 map底层的红⿊树节点中的数据&#xff0c;使⽤pair<Key, T>存储键值对数据 typedef pair<const Key, T> value_type; template <class T1, class T2> struct pair {typedef T1 first_type;typedef T2 second_type;T1 first;T2 second;pair() : …

Unity的Text组件中实现输入内容的渐变色效果

要在Unity的Text组件中实现输入内容的渐变色效果&#xff0c;默认的Text组件不直接支持渐变色。但是&#xff0c;你可以通过以下几种方式实现&#xff1a; ### 1. **使用Shader**来实现渐变效果 通过自定义Shader为Text组件创建一个渐变效果。这是一个常用的做法&#xff0…

MySQL---创建数据库(基于SQLyog)

目录 0.前言 1.基本认识 1.1编码集 1.2检验规则 2.库的创建和销毁 2.1指令介绍 2.2你可能会出现的问题 3.查看数据库属性 4.创建指定数据库 5.创建表操作 0.前言 之前写过一篇这个关于表的创建和销毁的操作&#xff0c;但是当时是第一次学习&#xff0c;肯定有些地方…

初识 C 语言(一)

目录 一、 第一个 C 程序1. printf() 函数和 stdio.h 头文件2. main() 函数和 return 语句 二、类型和变量1. C 语言中的基本类型2. 变量的创建和命名规则3. 类型和变量的大小 三、printf() 函数和 scanf() 函数1. printf() 函数的使用2. 各种类型的输出格式3. scanf() 函数的使…

2. 网络模型、协议

网络模型、协议 一、OSI七层模型1、OSI七层作用2、数据封装、解封装 二、典型的协议1、应用层2、传输层2.1 TCP建立连接&#xff0c; 三次握手2.2 断开连接&#xff0c;四次挥手 3、网络层 一、OSI七层模型 Open System Interconnect 开放式系统互连模型 降低数据在网络中传输…

web基础—dvwa靶场(十一)CSP Bypass

CSP Bypass(CSP 绕过) 内容安全策略&#xff08;CSP&#xff09;用于定义脚本和其他资源可以从何处加载或执行&#xff0c;本模块将指导您根据开发人员犯下的常见错误来绕过该策略。 这些漏洞都不是 CSP 中的实际漏洞&#xff0c;它们都是实现 CSP 的方式中的漏洞。 绕过内容安…

智慧城市主要运营模式分析

(一)运营模式演变 作为新一代信息化技术落地应用的新事物,智慧城市在建设模式方面借鉴了大量工程建设的经验,如平行发包(DBB,Design-Bid-Build)、EPC工程总承包、PPP等模式等,这些模式在不同的发展阶段和条件下发挥了重要作用。 在智慧城市发展模式从政府主导、以建为主、…

Eigen之SelfAdjointEigenSolver

Eigen::SelfAdjointEigenSolver 是 Eigen 库中的一个类,用于计算自伴随矩阵(对称矩阵)的特征值和特征向量。自伴随矩阵是指其等于自身的共轭转置的矩阵,通常在物理和工程中出现,比如协方差矩阵、赫尔米特矩阵等。 常用用法: 计算特征值和特征向量: SelfAdjointEigenSol…

计算机毕业设计 基于Flask+Vue的博客系统 Python毕业设计 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

Linux嵌入式驱动开发指南(速记版)---Linux基础篇

第一章 Ubuntu系统入门 uname -a #查看内核版本 cat etc/issue #查看系统版本 1.1 Linux磁盘管理 1.1.1 Linux磁盘管理基本概念 关键词&#xff1a; Linux 磁盘管理 挂载点 /etc/fstab文件 分区 ls /dev/sd* 联系描述&#xff1a; Linux 磁盘管理体系通过“挂载点”概念替代…

[数据集][目标检测]手机识别检测数据集VOC+YOLO格式9997张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;9997 标注数量(xml文件个数)&#xff1a;9997 标注数量(txt文件个数)&#xff1a;9997 标注…

linux之mysql安装

1:mysql安装包下载 下载地址 可私信我直接获取安装包 2:linux下wget命令下载 下载地址 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz3:手动安装 将自己的安装包上传到对应的位置 解压 压缩包 使用命令 tar -zxvf mysql-5.7…

Mac优化清理工具CleanMyMac X 4.15.6 for mac中文版

CleanMyMac X 4.15.6 for mac中文版下载是一款功能更加强大的系统优化清理工具&#xff0c;软件只需两个简单步骤就可以把系统里那些乱七八糟的无用文件统统清理掉&#xff0c;节省宝贵的磁盘空间。CleanMyMac X 4.15.6 for mac 软件与最新macOS系统更加兼容&#xff0c;流畅地…