vue3单个页面进行防抖节流

防抖

<template><button id="submitButton" ref="submitButton">GET</button>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';// 防抖函数
function debounce(func: () => void, delay: number) {let timer: number;return function () {clearTimeout(timer);timer = window.setTimeout(() => {func();}, delay);};
}// 使用 ref 访问 DOM 元素
const submitButton = ref<HTMLElement | null>(null);onMounted(() => {if (submitButton.value) {submitButton.value.addEventListener('click',debounce(() => {console.log('clicked');}, 1000));}
});
</script><style lang="scss" scoped>
</style>

 效果

 

节流

<template><button id="submitButton" ref="submitButton">GET</button></template><script lang="ts" setup>import { ref, onMounted } from 'vue';// 节流函数function throttle(func: () => void, limit: number) {let inThrottle: boolean;return function (...args: any[]) {if (!inThrottle) {func(...args);inThrottle = true;setTimeout(() => inThrottle = false, limit);}};}// 使用 ref 访问 DOM 元素const submitButton = ref<HTMLElement | null>(null);onMounted(() => {if (submitButton.value) {submitButton.value.addEventListener('click',throttle(() => {console.log('clicked');}, 1000));}});</script><style lang="scss" scoped></style>

效果

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

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

相关文章

小白尝试某程机票信息爬取

实训课需要机票数据集&#xff0c;网上没有&#xff0c;所以我选择爬取数据 此过程可谓经历的九九八十一难&#xff0c;也参考了不少大佬的文章&#xff0c;在此特别记录一下 弯路不多说&#xff0c;我直接讲成功的方法 找到请求url 通过控制台&#xff0c;最后确认下面的 …

基于Java中的SSM框架实现物流管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现物流管理系统演示 摘要 企业的发展离不开物流的运输&#xff0c;在一个大型的企业中&#xff0c;商品的生产和建设&#xff0c;推广只是前期的一些工作&#xff0c;在后期的商品销售和物流方面的建立&#xff0c;才能让一个企业得到大力的发展。 企业…

基于Linux/ARM/单片机利用状态机对多个按键进行扫描实现短按或者长按

1&#xff09;Linux/ARM/单片机入门级按键扫描程序设计&#xff0c;分享给将要学习或者正在学习Linux/ARM/单片机开发的同学。 2&#xff09;内容属于原创&#xff0c;若转载&#xff0c;请说明出处。 3&#xff09;提供相关问题有偿答疑和支持。 学习Linux/ARM/单片机的同学…

docker部署简单的Kafka

文章目录 1. 拉取镜像2. 运行创建网络运行 ZooKeeper 容器运行 Kafka 容器 3. 简单的校验1. 检查容器状态2. 检查 ZooKeeper 日志3. 检查 Kafka 日志4. 使用 Kafka 命令行工具检查5. 创建和删除测试主题 1. 拉取镜像 选择一组兼容性好的版本。 docker pull bitnami/kafka:3.6…

Facebook:数字社交的引领者与创新者

自2004年诞生以来&#xff0c;Facebook从一个校园网络项目迅速成长为全球最大的社交媒体平台&#xff0c;彻底改变了我们与世界互动的方式。作为数字社交的引领者和创新者&#xff0c;Facebook不仅在技术层面上不断突破&#xff0c;也在社会和文化领域留下了深刻的印记。本文将…

【论文解读】CVPR2024:DUSt3R: Geometric 3D Vision Made Easy

论文“”https://openaccess.thecvf.com/content/CVPR2024/papers/Wang_DUSt3R_Geometric_3D_Vision_Made_Easy_CVPR_2024_paper.pdf 代码&#xff1a;GitHub - naver/dust3r: DUSt3R: Geometric 3D Vision Made Easy DUSt3R是一种旨在简化几何3D视觉任务的新框架。作者着重于…

Docker的架构原理

例子可以想象成一个买手机的场景 clien可以想象 你个人 docker deamon &#xff1a;店员 images&#xff1a; 样机 regisitry&#xff1a; 手机仓库 container: 使用的手机 首先我要在店员买一个手机&#xff0c;店员发现是样机&#xff0c;但是仓库有&#xff0c;&…

11 docker安装redis

目录 安装redis 1. 配置redis配置文件redis.conf 1.1. 找到redis.conf文件 1.2. 配置文件 2. 启动容器 3. 测试redis-cli连接 4. 证明docker使用的是指定的配置文件 安装redis 1. 配置redis配置文件redis.conf 1.1. 找到redis.conf文件 宿主机创建目录/app/redis在/a…

双非怎么进大厂?

https://www.nowcoder.com/share/jump/2764630231719583704126 大家好&#xff0c;我是白露啊。 今天我们要分享一个非常励志的故事&#xff0c;它证明了双非背景的毕业生也可以通过努力和坚持&#xff0c;进入梦想中的大厂。 下面是这位网友的真实经历&#xff0c;希望能为正…

泰安再见,泰山OFFICE还会再见

路过泰安&#xff0c;遇见彩虹。怀念和感恩在泰山信息科技的万丈豪情。 泰山OFFICE&#xff0c;还是要复活。

提升Android Studio开发体验:使用Kelp插件实现颜色和图标预览

提升Android Studio开发体验&#xff1a;使用Kelp插件实现颜色和图标预览 在Android开发中&#xff0c;自动补全功能对于提高开发效率至关重要。然而&#xff0c;默认的Android Studio并不能预览颜色和图标&#xff0c;这使得开发者在选择资源时常常感到困惑。本文将介绍如何使…

LNMP架构搭建Discuz论坛

LNMP架构是一种用于搭建Web服务器环境的常用架构&#xff0c;由Linux、Nginx、MySQL和PHP组成 组成功能Linux作为操作系统的基础&#xff0c;提供稳定的环境Nginx作为反向代理服务器&#xff0c;处理客户端的请求并将他们转发给后端的应用服务器MySQL作为关系型数据库管理系统…

7.2 数据结构

作业 #include <stdio.h> #include <string.h> #include <stdlib.h> struct student {char name[32];int age;double score; }s[3];void stu_input(struct student *s,int n) {printf("请输入%d个学生的信息&#xff08;姓名&#xff0c;年龄&#xff0…

【服装识别系统】图像识别+Python+人工智能+深度学习+算法模型+TensorFlow

一、介绍 服装识别系统&#xff0c;本系统作为图像识别方面的一个典型应用&#xff0c;使用Python作为主要编程语言&#xff0c;并通过TensorFlow搭建ResNet50卷积神经算法网络模型&#xff0c;通过对18种不同的服装&#xff08;‘黑色连衣裙’, ‘黑色衬衫’, ‘黑色鞋子’, …

Meta 发布 Meta 3D Gen 文本生成3D模型

Meta推出了 Meta 3D Gen &#xff08;3DGen&#xff09;&#xff0c;这是一种用于文本到 3D 资产生成的最先进的快速管道。3DGen 可在一分钟内提供具有高提示保真度和高质量 3D 形状和纹理的 3D 资产创建。 它支持基于物理的渲染 &#xff08;PBR&#xff09;&#xff0c;这是…

网口串口(Serialport)服务器

文章所用工具http://t.csdnimg.cn/2gIR8http://t.csdnimg.cn/2gIR8 搭建服务器界面 操作配置文件保存方式类 public string FileName { get; set; }public IniHelper(string name) {this.FileName name; //在构造函数中给路径赋值} 1 先导入c语言进行读取操作ini文件的方法 …

Python基于you-get下载网页上的视频

​ 1.python 下载地址 下载 : https://www.python.org/downloads/ 2. 配置环境变量 配置 python_home 地址 配置 python_scripts 地址 在path 中加入对应配置 3. 验证 ​ C:\Users>python --version Python 3.12.4C:\Users>wheel version wheel 0.43.04. 下载 c…

Python从入门到放弃——浮点型变量

浮点型变量 前言 上一篇文章我们研究了整数类型变量&#xff0c;本次我们来开始研究一下浮点类型变量。 浮点类型 浮点数在计算机编程中扮演着重要的角色。它们是一种特殊的数据类型&#xff0c;用于存储和处理小数或实数。在Python中&#xff0c;浮点数是由小数点分隔的…

迎接创新浪潮!RFID国军标助力数字化装备场转型

随着大数据、物联网的飞速发展&#xff0c;数字化转型已成为军事发展的核心战略之一。在这一重大历史进程中&#xff0c;广州一芯未来的RFID国军标呈现出独特而重要的作用。它不仅提升了装备管理的效率和准确性&#xff0c;还增强了装备的安全保障和资源配置的合理性。它以高效…