uniapp 防抖节流封装和使用

防抖(debounce):定义一个时间,延迟n秒执行,n秒内再次调用,会重新计时,计时结束后才会再次执行

主要运用场景:

  1. 输入框实时搜索:在用户输入内容的过程中,使用防抖可以减少频繁的查询操作,提高性能。
  2. 点击事件:当用户在短时间内多次点击某个按钮时,可以使用防抖只执行一次点击事件,避免不必要的重复操作。

函数封装 util文件下创建 commo.js文件

let timer/**
*防抖
*/export function debounce(fn,delay){clearTimeout(timer)timer = setTimeout(()=>{fn();},delay);
}

引入调用

//引入防抖函数
import {debounce} from 'util/common.js'//调用
debounce(()=>{//需要防抖执行的逻辑
},800)

节流(throttle): 函数会在一个时间段内只执行一次

主要运用场景:登陆、频繁请求大量数据接口

函数封装 util文件下创建 commo.js文件

let lastCall = 0/**
*节流函数
*/export function throttle(fn,delay){const now = new Date().getTime();if(now-lastCall<delay){return}lastCall = nowfn.apply(this,arguments)}

引入调用

//引入防抖函数
import {throttle} from 'util/common.js'//调用
throttle(()=>{//需要节流执行的逻辑
},800)

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

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

相关文章

【ARM Trace32(劳特巴赫) 使用介绍 5 -- Trace32 ELF 文件加载介绍】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 1.1 Trace32 加载符号表1.1.1 ELF 文件加载1.1.2 其它格式文件加载1.1.3 多个 ELF 的加载1.2 Trace32 UEFI 配置1.2.1 x86 32-BIT1.2.2 x86 64-BIT1.2.3 ARM1.1 Trace32 加载符号表 劳特巴赫 TRACE32 可以显示目标…

【每周一测】Java阶段三第三周学习

目录 1、事务四个隔离级别中&#xff0c;哪一个不能防止脏读 2、关于sleep()和wait()&#xff0c;以下描述错误的一项是&#xff08;&#xff09; 3、以下关于Servlet生命周期说法错误的是&#xff08; &#xff09; 4、下列概念解释说明错误的是 5、在 JWT 中&#xff0c…

数据结构与算法【二叉搜索树】Java实现

介绍 二叉搜索树&#xff08;也称二叉排序树&#xff09;是符合下面特征的二叉树&#xff1a; 树节点增加 key 属性&#xff0c;用来比较谁大谁小&#xff0c;key 不可以重复对于任意一个树节点&#xff0c;它的 key 比左子树的 key 都大&#xff0c;同时也比右子树的 key 都…

SQL-对比两表中数据

需求&#xff1a;表1中有多行id相同 select a.item_code, totalAmount , b.online_qty from (select item_code, sum(a.online_qty) as TotalAmountfrom serial_bal awhere a.wh_code SJ38group by item_code) a left join(select item_code,online_qtyfrom wh_bal bwhere b.…

ESP32 MicroPython 图像采集及拍照功能的使用⑧

ESP32 MicroPython 图像采集及拍照功能的使用⑧ 1、摄像头应用2、图像采集5、实验结果6、按键拍照7、实验内容8、参考代码9、实验结果 1、摄像头应用 小车配有摄像头&#xff0c;可以使用摄像头实现拍照、图像显示、图像识别等功能。小车已经内置有我们专门移植的摄像头驱动库…

[Docker]六.Docker自动部署nodejs以及golang项目

一.自动部署nodejs 1.创建node项目相关文件 app.js代码如下: var express require(express);var appexpress();app.get(/,function(req,res){res.send(首页update); }) app.get(/news,function(req,res){res.send(首页); })//docker做端口映射的时候不要指定ip app.listen(30…

大模型重塑软件设计,南京真我加入飞桨技术伙伴,大模型生态圈成员又添一员!

为帮助伙伴更快、更好的应用大模型技术&#xff0c;飞桨技术伙伴体系及权益基于星河共创计划全面升级&#xff0c;通过丰富的场景、技术、算力、品牌等资源&#xff0c;为伙伴企业提供一站式的大模型资源对接&#xff0c;全面降低创建AI原生应用的门槛。 近日&#xff0c;南京…

二十三种设计模式全面解析-解密职责链模式:请求处理的设计艺术

当我们构建软件系统时&#xff0c;经常会遇到需要处理各种不同类型请求的情况。有时&#xff0c;请求的处理逻辑可能相当复杂&#xff0c;需要按照一定的规则和条件进行处理。在本文中&#xff0c;我们将深入探讨职责链模式在请求处理中的应用。职责链模式通过将请求发送者和接…

win10家庭版系统远通过一根网线程连接另一台机器

用网线连接两个机器 打开cmd命令行 输入ipconfig&#xff0c;查看 复制 IPv4地址 打开 远程桌面 程序 点击连接 输入在另外一机器设置好的用户名和密码即可

docker打包chatpdf(自写)

docker打包上传 docker build -t kitelff/chatpdf:v0.1 .##修改镜像名字 docker tag c2c1a0eb4e08 kitelff/chatpdf:v0.1## push docker push kitelff/chatpdf:v0.1上传文件&#xff0c;测试效果

【brpc学习实战二】brpc client构建基本流程

client基本概念及学习指南 https://github.com/luozesong/brpc/blob/master/docs/cn/client.md 一、编写proto 这里与服务一致&#xff0c;实际开发中需要双端共同确定proto内容&#xff1b; 二、初始化channel rpc channel可以视为socket编程中的client对象 定义一个chan…

字符串统计

题目部分 题目字符串统计难度易题目说明给定两个字符集合&#xff0c;一个是全量字符集&#xff0c;一个是已占用字符集&#xff0c;已占用字符集中的字符不能再使用&#xff0c;要求输出剩余可用字符集。输入描述1. 输入一个字符串 一定包含&#xff0c;前为全量字符集 后的为…

BananaPi BPI-M6(Raspberry Pi 5) Android 平板电脑镜像测试温度

我已经在本文中介绍了 全新的Banana Pi BPI-M6&#xff0c;并讨论了其与Raspberry Pi 5的硬件特性比较。 然后我将 Android 平板电脑固件上传到 eMMC&#xff0c;从而使 Banana Pi 实际可用。一开始有点坎坷&#xff0c;但文章中有更多内容。 在另一台电脑上&#xff0c;一切都…

Arcgis小技巧【16】:ArcMap的那些功能在ArcGIS Pro里都去哪儿了?

有部分小伙伴现在已经用上了ArcGIS Pro&#xff0c;但可能还会有些不习惯。 一个很重要的原因&#xff0c;原来在ArcMap中的一些功能&#xff0c;好像在Pro里消失了。 不排除一些功能确实被移除了&#xff0c;但大部分其实是因为UI的变化&#xff0c;给放在了别的地方。 这里…

Linux CentOS7配置网络参数

CentOS6及以前版本中主要使用ifconfig工具&#xff0c;查看、配置网络参数。后来对推荐使用ip命令查看配置网络参数。而centos7中&#xff0c;不再赞成使用ifconfig工具&#xff0c;取而代之的是nmcli工具&#xff0c;服务管理也是以systemctl工具取代了service,这些之前版本的…

音视频项目—基于FFmpeg和SDL的音视频播放器解析(十二)

介绍 在本系列&#xff0c;我打算花大篇幅讲解我的 gitee 项目音视频播放器&#xff0c;在这个项目&#xff0c;您可以学到音视频解封装&#xff0c;解码&#xff0c;SDL渲染相关的知识。您对源代码感兴趣的话&#xff0c;请查看基于FFmpeg和SDL的音视频播放器 如果您不理解本…

学霸教你自学人工智能

在这个信息爆炸的时代&#xff0c;人工智能已经渗透到我们生活的方方面面。无论是语音助手、自动驾驶汽车&#xff0c;还是医疗诊断&#xff0c;人工智能都在发挥着越来越重要的作用。如果你对人工智能充满热情&#xff0c;希望在这个领域有所建树&#xff0c;那么&#xff0c;…

基于深度学习的视觉三维重建研究总结

参考连接&#xff1a; 基于深度学习的视觉三维重建研究总结 - 知乎

微信私域运营工具CRM

为什么要做微信私域&#xff1f; 客户在哪里&#xff1f;微信&#xff01;在中国&#xff0c;不论男女老少&#xff0c;90%的人每天使用微信至少5次&#xff0c;每次使用时间超过90分钟&#xff0c;已经成为像吃饭穿衣一样的生活必需品。因此&#xff0c;我们的目标客户就在微…

【github】初学者使用指南

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于新西兰奥克兰大学攻读IT硕士学位。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。跨领域…