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

如何在Vue3项目中使用防抖节流技巧

前言

防抖节流是可以说是一种优化组件性能的技巧,可以有效减少组件中的渲染次数和计算量,从而提高组件的响应速度和用户体验。在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)运行效果

分别连续点击按钮即可看到效果 ~

二、自行设计实现的防抖节流函数

(1)自行设计实现防抖节流的好处

关于Vue的防抖节流函数库或插件已经有很多了,这个可以自己搜一下并看看效果如何。那为何还需要自行设计实现防抖节流?因为有些需求需要定制化设计,同时你还知道了防抖节流的基本原理。

(2)防抖节流具体实现

/*** 防抖*/
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()}}
}

(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, str) => {// ---- ^ 业务逻辑 ----// 定义fn方法const fn = (evt) => {console.log('debounce =>', evt, str)}// 调用fn方法fn(evt)// ---- / 业务逻辑 ----
}, 1000)/*** 节流·足球*/
const handleThrottleClick = throttle((evt, str) => {// ---- ^ 业务逻辑 ----// 定义fn方法const fn = (evt) => {console.log('throttle =>', evt, str)}// 调用fn方法fn(evt)// ---- / 业务逻辑 ----
}, 1000)

(4)运行效果

分别连续点击按钮即可看到效果 ~

相关文章:

如何在Vue3项目中使用防抖节流技巧

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

快速排序(Java)

基本思想 快速排序Quicksort&#xff09;是对冒泡排序的一种改进。 基本思想是分治的思想&#xff1a;通过一趟排序将要排序的数据分割成独立的两部分&#xff0c;其中一部分的所有数据都比另外一部分的所有数据都要小&#xff0c;然后再按此方法对这两部分数据分别进行快速排…...

在ffmpeg中,如何把h264转换为rgb格式

在ffmpeg中&#xff0c;网络视频流h264为什么默认的转为YUV而不是其他格式 文章中介绍了&#xff0c;h264解码的时候是直接解码为yuv的&#xff0c;如果在使用的过程中 需要用到rgb的格式&#xff0c;我们该如何来转换这种格式呢&#xff1f; 在上面的文章中&#xff0c;我们已…...

【重磅】Cookies、headers、Session规律总结,搞定卡点

【重磅】Cookies规律总结,搞定卡点 登录后开始正式获取数据阶段: 不使用session: 放在请求头headers中 当如是:headers = {“user-agent”: “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36”,“Coo…...

【雷达原理】雷达杂波抑制方法

目录 一、杂波及其特点 1.1 什么是杂波&#xff1f; 1.2 杂波的频谱特性 二、动目标显示(MTI)技术 2.1 对消原理 2.2 数字对消器设计 三、MATLAB仿真 3.1 对消效果验证 3.2 代码 一、杂波及其特点 1.1 什么是杂波&#xff1f; 杂波是相对目标回波而言的&#xff0c;…...

Python-敲木鱼升级版(真手动版敲木鱼)

演示效果 需要安装的第三方库&#xff1a; pip install pygame # 加载音乐 pip install pillow # 加载图片 pip install mediapipe # 判断手势的模型 pip install opencv # 模型要用来处理图形 建议有独显和摄像头的可以尝试&#xff01; 想着升级一下玩法&#xff0c;只有真敲…...

Websocket @ServerEndpoint不能注入@Autowired

在websocket中使用ServerEndpoint无法注入Autowired、Value 问题分析 Spring管理采用单例模式&#xff08;singleton&#xff09;&#xff0c;而 WebSocket 是多对象的&#xff0c;即每个客户端对应后台的一个 WebSocket 对象&#xff0c;也可以理解成 new 了一个 WebSocket&…...

Unity热更新

1&#xff0c;热更新的概念与作用 app更新通常分为两类&#xff0c;一种是整包更新&#xff08;换包&#xff09;&#xff0c;一种是热更新&#xff08;不换包&#xff0c;通过网络下载&#xff0c;动态更新资源等&#xff09;。 整包更新&#xff0c;是指在需要更新时&#x…...

如何用维格云搭建和一键训练你的钧瓷AI机器人?

大禹智库 第69期(总第400期) 2023年11月4日 如何用维格云搭建和一键训练你的钧瓷AI机器人? 钧瓷私有数据聊天机器人是一种能够根据预设的数据集进行智能对话的机器人。通过维格云,我们可以轻松地搭建自己的钧瓷私有数据聊天机器人。本文将以钧道机器人为例,详细介绍如何…...

整理的一些Java细节问题

1. 为什么要有无参构造&#xff1f; 在 Java 中&#xff0c;如果一个类没有显式定义构造方法&#xff0c;编译器会自动生成一个默认的无参构造方法&#xff08;也称为默认构造方法&#xff09;。无参构造方法是一个没有任何参数的构造方法。 无参构造方法的存在有几个重要原因…...

初识AUTOSAR网络管理

文章目录 目的模式时间参数T_REPEAT_MESSAGET_NM_TIMEOUTT_WAIT_BUS_SLEEPT_START_Tx_AppFrameT_NM_ImmediateCycleTimeT_NM_MessageCycleN_ImmediateNM_TIMEST_START_NM_TXT_WakeUp跳转状态NM_1NM_2NM_3NM_4NM_5NM_6NM_7...

Flink SQL Hive Connector使用场景

目录 1.介绍 2.使用 2.1注册HiveCatalog 2.2Hive Read 2.2.1流读关键配置 2.2.2示例...

【Docker】联合探讨Docker:容器化技术的革命性应用

前言 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 &#x1f4d5;作者简介&#xff1a;热…...

dirhunt使用手册,中文版

“dirhunt” 的命令行工具的帮助信息&#xff0c;用于目录扫描和网站内容分析。以下是这个命令的使用方法和示例&#xff1a; 命令格式&#xff1a; dirhunt [OPTIONS] [URLS]… [URLS]…&#xff1a;一个或多个域名或 URL&#xff0c;可以加载来自文件的 URL&#xff0c;使用…...

【从0到1设计一个网关】如何设计一个稳定的网关?

文章目录 高可用分析软件架构心跳检测自动恢复熔断降级接口重试隔离压测和预案多机房灾备以及双活数据中心异常处理机制重试主备服务自动切换动态剔除或恢复异常机器超时时间的考虑服务设计这篇文章并没有具体的业务实现,而只是对于如何设计一个高可用,稳定的网关列举出了一些…...

chromedp库编写程序

步骤1&#xff1a;首先&#xff0c;我们需要导入chromedp库&#xff0c;以便使用它来下载网页内容。 import chromedp 步骤2&#xff1a;然后&#xff0c;我们需要创建一个函数&#xff0c;该函数接受一个URL作为参数&#xff0c;并使用chromedp库下载该URL的内容。 func do…...

pngquant failed to build, make sure that libpng-dev is installed 问题

第一个参考方案失败 &#xff1a;npm install -g windows-build-tools4.0.0 安装失败&#xff0c;提示 依赖不在支持 第二个方案&#xff0c;降低node 版本 失败 第三种方案&#xff0c;成功 先执行&#xff0c;下面两行代码&#xff0c;再按照依赖 npm install imagemin-pn…...

进程控制(二):进程等待

文章目录 进程控制&#xff08;二&#xff09;进程等待wait函数waitpid函数wait/waitpid获取子进程状态码的过程进程等待相关的宏 总结 进程控制&#xff08;二&#xff09; 延续对于上文进程结束&#xff0c;我们继续对于进程控制进行学习&#xff0c;本文我们主要是对于进程…...

SWAT-MODFLOW地表水与地下水耦合模型的建模及应用

目录 第一讲 模型原理与层次结构 第二讲 QGIS软件 第三讲 基于QSWATMOD的SWAT-MODFLOW模拟 第四讲 QSWAT模型介绍与建模 第五讲 基于QGIS的数据制备 第六讲 基于CUP的SWAT参数率定 第七讲 MODFLOW模型讲解 第八讲 结果分析 更多应用 耦合模型被应用到很多科学和工程领…...

使用navicat操纵数据库

<1>连接数据库 打开Navicat&#xff0c;点击“连接”&#xff0c;选择“MySQL”&#xff0c;这边是本机安装的mysql,主机为localhost&#xff0c;输入root密码。 使用Navicat创建数据库并导入SQL文件 SQL查询 普通SQL查询 USE demo; SELECT * FROM t_emp;SELECT emp…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

测试markdown--肇兴

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

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...