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

基于Vue3内置的lodash函数库实现防抖节流

前言

防抖节流是可以说是一种优化组件性能的技巧,可以有效减少组件中的渲染次数和计算量,从而提高组件的响应速度和用户体验。在Vue3中可以使用`lodash`库中的`debounce`和`throttle`函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数,调用方式都差不多。

防抖:在一定时间内,多次触发同一事件,只执行最后一次操作,常用于输入框搜索、滚动加载等场景。

节流:在一定时间内,多次触发同一事件,限制函数执行频率,防止函数被频繁调用,从而提高页面性能。

一、基于Vue3内置的lodash函数库实现防抖节流

(1)导入lodash函数库的防抖和节流方法

import { debounce, throttle } from 'lodash'

(2)写两个按钮

<el-button size="small" type="primary" @click="handleDebounceClick($event)"><el-icon :size="16" style="margin-right: 5px;"><Basketball /></el-icon><small>防抖·篮球</small>
</el-button><el-button size="small" type="primary" @click="handleThrottleClick($event)"><el-icon :size="16" style="margin-right: 5px;"><Football /></el-icon><small>节流·足球</small>
</el-button>

(3)写两个方法

/*** 防抖·篮球*/
const handleDebounceClick = debounce((evt) => {// ---- ^ 业务逻辑 ----// 定义fn方法const fn = (evt) => {console.log('debounce =>', evt)}// 调用fn方法fn(evt)// ---- / 业务逻辑 ----
}, 1000)/*** 节流·足球*/
const handleThrottleClick = throttle((evt) => {// ---- ^ 业务逻辑 ----// 定义fn方法const fn = (evt) => {console.log('throttle =>', evt)}// 调用fn方法fn(evt)// ---- / 业务逻辑 ----
}, 1000)

(4)防抖节流的实现方法

/*** 防抖*/
const debounce = (fn, time) => {let timer = nullreturn (...args) => {const context = thisif (timer) {clearTimeout(timer)}timer = setTimeout(() => {fn.call(context, ...args)}, time)}
}/*** 节流*/
const throttle = (fn, time) => {let activeTime = nullreturn (...args) => {const context = thisconst current = Date.now()if (current - activeTime >= time) {fn.call(context, ...args)activeTime = Date.now()}}
}

相关文章:

基于Vue3内置的lodash函数库实现防抖节流

前言 防抖节流是可以说是一种优化组件性能的技巧&#xff0c;可以有效减少组件中的渲染次数和计算量&#xff0c;从而提高组件的响应速度和用户体验。在Vue3中可以使用lodash库中的debounce和throttle函数来分别实现防抖和节流。当然也可以自行设计实现防抖节流函数&#xff0…...

ls -a有什么作用

ls -a 是一个在类Unix操作系统&#xff08;如Linux、macOS&#xff09;中使用的命令&#xff0c;用于列出目录中的所有文件和目录&#xff0c;包括那些以.开头的隐藏文件。 具体作用如下&#xff1a; ls: 这是一个列出目录内容的命令。 -a: 这是一个选项&#xff0c;表示"…...

LLM - 使用 RAG (检索增强生成) 多路召回 实现 精准知识问答 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142629289 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 RAG (R…...

编程语言图书创作要注意的事情有哪些?

编程语言图书的创作是一项复杂且具有挑战性的任务&#xff0c;需要作者深入理解技术、清晰表达&#xff0c;并考虑读者的学习体验。一本优秀的编程书籍不仅能够教授技术知识&#xff0c;更能引导读者逐步深入&#xff0c;激发他们的思考和实际应用能力。以下将详细探讨编程语言…...

主流高级编程语言的推出时间及年份

1.下表一些主流高级编程语言的推出时间及年份&#xff1a; 高级语言 推出时间 岁数 FORTRAN 1957 67 LISP 1959 65 COBOL 1961 63 BASIC 1964 60 Pascal 1970 54 C 1972 52 MATLAB 1978 46 SQL 1978 46 Objective-C 1983 41 C 1983 41 Perl …...

qt 模仿简易的软狗实现

我们在写软件的时候&#xff0c;希望我们的软件只在固定的机器上运行&#xff0c;其他机器上运行不了&#xff0c;那我们应该如何做呢&#xff1f; 1 首先我们需要得到运行机器的mac地址&#xff0c;这样可以简易的判断是否是我们授权的机器。 那我们首先定义一个授权mac机器…...

荣业食品销售费用每年上亿元:主要产品收入大降,电商占比过低

《港湾商业观察》黄懿 今年3月&#xff0c;广东荣业食品有限公司的控股公司Wing Yip Food Holdings Group Limited&#xff08;下称“荣业食品”&#xff09;向美国SEC递交了纳斯达克上市申请。 据悉&#xff0c;2023年11月&#xff0c;商务部宣布移除了一批共计55家因长期经…...

数据结构:并查集

数据结构&#xff1a;并查集 并查集原理实现框架初始化合并查询获取成员路径压缩其它 总代码 并查集 在生活中&#xff0c;经常会出现分组问题。比如一个班级分为多个小组&#xff0c;打篮球分为两方等等。在同一个组中的所有成员&#xff0c;就构成一个集合。对这种一个群体分…...

微信小程序实战教程:轻松实现列表批量选择功能

在许多场景下&#xff0c;用户需要对列表中的多项内容进行操作&#xff0c;如批量删除、批量下载等。为了满足这一需求&#xff0c;我们需要在微信小程序中实现列表批量选择功能。具体要求如下&#xff1a; 用户可以逐个选择列表项&#xff0c;也可通过全选按钮快速选择所有列表…...

企业微信:开启客户联系和配置

前言 客户联系是企业微信的一项非常实用且自定义化配置丰富的功能&#xff0c;使企业内的授权员工可以添加外部客户&#xff08;企业微信联系人和微信联系人&#xff09;进行工作沟通&#xff0c;并且还可以建立客户群&#xff0c;甚至发表内容到客户朋友圈&#xff01; 由于功…...

Python发送邮件教程:如何实现自动化发信?

Python发送邮件有哪些方法&#xff1f;如何利用python发送邮件&#xff1f; 无论是工作汇报、客户通知还是个人提醒&#xff0c;邮件都能快速传递信息。Python发送邮件的自动化功能就显得尤为重要。AokSend将详细介绍如何使用Python发送邮件&#xff0c;实现自动化发信&#x…...

一周热门|苏姿丰:芯片行业不能只盯着 GPU;Gartner:GenAI 即将越过期望膨胀期

大模型周报将从【企业动态】【技术前瞻】【政策法规】【专家观点】四部分&#xff0c;带你快速跟进大模型行业热门动态。 01 企业动态 Open AI 计划从非营利组织向营利组织转型 日前&#xff0c;路透社报道称&#xff0c;OpenAI 正在制定一项计划&#xff0c;将其核心业务重…...

Failed to load WebView provider: No WebView installed

1、问题 使用webview加载网页&#xff0c;在应用运行时&#xff0c;报了如下错误&#xff1a;android.webkit.WebViewFactory$MissingWebViewPackageException: Failed to load WebView provider: No WebView installed2、分析 通过查看项目的修改记录&#xff0c;确实安装了We…...

java日志框架之Log4j

文章目录 一、Log4j简介二、Log4j组件介绍1、Loggers (日志记录器)2、Appenders&#xff08;输出控制器&#xff09;3、Layout&#xff08;日志格式化器&#xff09; 三、Log4j快速入门四、Log4j自定义配置文件输出日志1、输出到控制台2、输出到文件3、输出到数据库 五、Log4j自…...

C++ bitset(位图)的模拟实现

文章目录 一、bitset接口总览二、bitset模拟实现1. 构造函数2. set、reset、flip、test3. size、count4. any、none、all5. 打印函数 三、完整代码 一、bitset接口总览 成员函数功能set设置指定位或所有位为1&#xff08;即设置为“已设置”状态&#xff09;reset清空指定位或…...

Llama 3.2:利用开放、可定制的模型实现边缘人工智能和视觉革命

在我们发布 Llama 3.1 模型群后的两个月内&#xff0c;包括 405B - 第一个开放的前沿级人工智能模型在内&#xff0c;它们所产生的影响令我们兴奋不已。 虽然这些模型非常强大&#xff0c;但我们也认识到&#xff0c;使用它们进行构建需要大量的计算资源和专业知识。 我们也听到…...

解决R语言bug ‘sh‘ is not recognized as an internal or external command

安装源码包‘httr2’ trying URL ‘https://cran.rstudio.com/src/contrib/httr2_1.0.5.tar.gz’ Content type ‘application/x-gzip’ length 230632 bytes (225 KB) downloaded 225 KB installing source package ‘httr2’ … ** package ‘httr2’ successfully unpacked…...

记一次Mac 匪夷所思终端常用网络命令恢复记录

一天莫名奇妙发现ping dig 等基础命令都无法正常使用。还好能浏览器能正常访问&#xff0c;&#xff0c;&#xff0c;&#xff0c; 赶紧拿baidu试试^-^ ; <<>> DiG 9.10.6 <<>> baidu.com ;; global options: cmd ;; connection timed out; no serve…...

2024最新!!Java后端面试题(4)看这一篇就够了!!!!

七、异常 throw 和 throws 的区别&#xff1f; throw用来显式地抛出一个异常&#xff0c;而throws则用于在方法声明中指明该方法可能抛出的异常。简单来说&#xff0c;throw是抛出异常的实际动作&#xff0c;throws是告知调用者这个方法可能会抛出哪些异常的声明。 final、f…...

springboot整合sentinel和对feign熔断降级

一、准备 docker安装好sentinel-dashboard&#xff08;sentinel控制台&#xff09;&#xff0c;参考docker安装好各个组件的命令启动sentinel-dashboard&#xff0c;我的虚拟机ip为192.168.200.131&#xff0c;sentinel-dashboard的端口为8858 二、整合sentinel的主要工作 在…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

小智AI+MCP

什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析&#xff1a;AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github&#xff1a;https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...