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

实现防重复操作(JS与CSS)

实现防重复操作(JS与CSS)

一、前言

日常开发中我们经常会对按钮进行一个防重复点击的校验,这个通常使用节流函数来实现。在规定时间内只允许提交一次,可以有效的避免事件过于频繁的执行和重复提交操作,以及为服务器考虑 。

举例假设有一个提交按钮submit,现在要对于这个按钮来进行防重复校验;

<button type="submit" id="subBth">提交<button/>

下面介绍集中防重复点击的方案:

二、JS实现防重复点击

节流思想:就是在一定时间内不管触发多少次,只要过了单位时间只会执行一次。结合场景来说就是用户点了一次提交之后,5s内重复点提交按钮都不会重新发起请求。

2.1 手写节流函数

实现思路:

  1. 点击事件触发后设置一个倒计定时器;
  2. 在定时器还没结束之前再次点击不进入事件;
  3. 定时器结束之后可以再次点击;
const throttle = (fn, delay) => {let timer = null;return function() {if(!timeout){timeout = setTimeout(()=>{timeout = null;fn.apply(this, arguments);},delay)}};
}// 提交事件
function submit() {};
const btn = document.querySelector('#subBth');
btn.addEventListener('click', throttle(submit, 500));

2.2 使用lodash工具库

// 安装  npm i --save lodash
// 使用
import { throttle } from 'lodash';
// 提交事件
function submit() {};
const btn = document.querySelector('#subBth');
btn.addEventListener('click', throttle(submit, 500));

三、使用CSS实现防重复点击

从CSS层面需要做哪些事情:

  1. 需要控制button按钮的点击限制;
  2. 需要有时间控制禁用时效;
  3. 规定时间结束后可以再次点击;

为此需要介绍两个CSS属性

3.1 pointer-events指针属性

官方文档解释为:指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target(事件触发对象)。

简单来说就是:可以控制元素是否可以被事件冒泡或捕获到,主要是适用于SVG内容的,但这里我们可以用它来控制按钮是否可以被点击

属性值有很多,这里就不一一介绍感兴趣的可以去官方文档查看

我们需要了解的属性值是noneall

  1. none:元素永远不会成为鼠标事件的触发对象;
  2. all:只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标

3.2 animation动画属性

官方解释:animation 属性是 animation-nameanimation-duration, animation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state属性的一个简写属性形式。用来指定一组或多组动画,每组之间用逗号相隔。

简单来说:animation 就是一个动画的组合属性的简写,可以让我们不需要写那么多的css动画属性。

在这里也不详细介绍具体用法,感兴趣可以去官方文档学习。

3.3 具体实现

实现思路:

  1. 设置500ms的动画时间
  2. 动画开始时禁用鼠标事件
  3. 动画结束后取消禁用
  4. 设置active清空animation动画,方便点击是再次触发动画
  5. 设置提交事件直接使用就行
/* 小知识点:在active触发时设置animation为none,会重新触发动画 */
#subBth:active{animation: none;
}
#subBth{width: 200px;height: 60px;font-size: 30px;background: #00ffff ;/* animation: 动画名称绑定keyframes 动画时长 速度曲线 动画不播放状态  *//* step-end: 上一个状态直接切换下一个状态 *//* forwards: 当动画播放完成后,保持动画最后一个关键帧中的样式 */animation: throttle 500ms step-end forwards;
}
/* 定义动画规则 */
@keyframes throttle {/* 动画开始时样式 */from {background: #eee;pointer-events: none;}/* 动画结束时样式 */to {background: #00ffff;pointer-events: all;}
}const btn = document.querySelector('#subBth');
btn.addEventListener('click', submit);

相关文章:

实现防重复操作(JS与CSS)

实现防重复操作&#xff08;JS与CSS&#xff09; 一、前言 日常开发中我们经常会对按钮进行一个防重复点击的校验&#xff0c;这个通常使用节流函数来实现。在规定时间内只允许提交一次&#xff0c;可以有效的避免事件过于频繁的执行和重复提交操作&#xff0c;以及为服务器考…...

怎么合并或注销重复LinkedIn领英帐号?

您可能会发现您拥有多个领英帐户。如果您收到消息&#xff0c;提示您尝试使用的邮箱与另一个帐户已绑定&#xff0c;就表明您可能存在重复的领英帐户。如果您使用许多不同的邮箱地址&#xff0c;也可能会收到这样的提示。 领英精灵温馨提示: 目前&#xff0c;仅支持在 PC 端合并…...

Redis高频面试题汇总(中)

目录 1.什么是redis事务&#xff1f; 2.如何使用 Redis 事务&#xff1f; 3.Redis 事务为什么不支持原子性 4.Redis 事务支持持久性吗 5.Redis事务基于lua脚本的实现 6.Redis集群的主从复制模型是怎样的&#xff1f; 7.Redis集群中&#xff0c;主从复制的数据同步的步骤 …...

【Flutter从入门到入坑之三】Flutter 是如何工作的

【Flutter从入门到入坑之一】Flutter 介绍及安装使用 【Flutter从入门到入坑之二】Dart语言基础概述 【Flutter从入门到入坑之三】Flutter 是如何工作的 本文章主要以界面渲染过程为例&#xff0c;介绍一下 Flutter 是如何工作的。 页面中的各界面元素&#xff08;Widget&…...

Web Components学习(2)-语法

一、Web Components 对 Vue 的影响 尤雨溪在创建 Vue 的时候大量参考了 Web Components 的语法&#xff0c;下面写个简单示例。 首先写个 Vue 组件 my-span.vue&#xff1a; <!-- my-span.vue --> <template><span>my-span</span> </template>…...

Lesson 9.2 随机森林回归器的参数

文章目录一、弱分类器的结构1. 分枝标准与特征重要性2. 调节树结构来控制过拟合二、弱分类器的数量三、弱分类器训练的数据1. 样本的随机抽样2. 特征的随机抽样3. 随机抽样的模式四、弱分类器的其他参数在开始学习之前&#xff0c;先导入我们需要的库。 import numpy as np im…...

Kubernetes Secret简介

Secret概述 前面文章中学习ConfigMap的时候&#xff0c;我们说ConfigMap这个资源对象是Kubernetes当中非常重要的一个对象&#xff0c;一般情况下ConfigMap是用来存储一些非安全的配置信息&#xff0c;如果涉及到一些安全相关的数据的话用ConfigMap就非常不妥了&#xff0c;因…...

Redis 哨兵(Sentinel)

文章目录1.概述2. 没有哨兵下主从效果3.搭建多哨兵3.1 新建目录3.2 复制redis3.3 复制配置文件3.4 修改配置文件3.5 启动主从3.6 启动三个哨兵3.7 查看日志3.8 测试宕机1.概述 在redis主从默认是只有主具备写的能力&#xff0c;而从只能读。如果主宕机&#xff0c;整个节点不具…...

精读笔记 - How to backdoor Federated Learning

文章目录 精读笔记 - How to backdoor Federated Learning1. 基本信息2. 系统概要3. 攻击模型3.1 问题形式化定义3.1.1 前提假设3.1.2 攻击目标3.2 创新点3.2.1 Semantic Backdoor3.2.2 攻击方法4. 实验验证4.1 图像分类4.2 实验操作4.2.1 超参数设置4.2.2 衡量标准4.3 结果分析…...

即时通讯系列-N-客户端如何在推拉结合的模式下保证消息的可靠性展示

结论先行 原则&#xff1a; server拉取的消息一定是连续的原则&#xff1a; 端侧记录的消息的连续段有两个作用&#xff1a; 1. 记录消息的连续性&#xff0c; 即起始中间没有断层&#xff0c; 2. 消息连续&#xff0c; 同时意味着消息是最新的&#xff0c;消息不是过期的。同…...

关于js数据类型的理解

目录标题一、js数据类型分为 基本数据类型和引用数据类型二、区别&#xff1a;传值和传址三、深浅拷贝传值四、数据类型的判断一、js数据类型分为 基本数据类型和引用数据类型 1、基本数据类型 Number、String、Boolean、Null、undefined、BigInt、Symbol 2、引用数据类型 像对…...

大一上计算机期末考试考点

RGB颜色模型也称为相加混色模型 采样频率大于或等于原始声音信号最高频率的两倍即可还原出原始信号. 声音数字化过程中&#xff0c;采样是把时间上连续的模拟信号在时间轴上离散化的过程。 量化的主要工作就是将幅度上连续取值的每一个样本转换为离散值表示。 图像数字化过…...

微搭问搭001-如何清空表单的数据

韩老师&#xff0c;我点关闭按钮后&#xff0c;弹窗从新打开&#xff0c;里面的数据还在&#xff0c;这个可以从新打开清除不&#xff1f; 点关闭的时候清掉 就是清楚不掉也&#xff1f;咋清掉 清掉表单内容有属性可以做到&#xff1f; $page.widgets.id**.value “” 就可以实…...

Windows7,10使用:Vagrant+VirtualBox 安装 centos7

一、Vagrant&#xff0c;VirtualBox 是什么二、版本说明1、win7下建议安装版本2、win10下建议安装版本三、Windows7下安装1、安装Vagrant2、安装VirtualBox3、打开VirtualBox&#xff0c;配置虚拟机默认安装地址四、windows7下载.box文件&#xff0c;安装centos 71、下载一个.b…...

基于JavaEE开发博客系统项目开发与设计(附源码)

文章目录1.项目介绍2.项目模块3.项目效果1.项目介绍 这是一个基于JavaEE开发的一个博客系统。实现了博客的基本功能&#xff0c;前台页面可以进行文章浏览&#xff0c;关键词搜索&#xff0c;登录注册&#xff1b;登陆后支持对文章进行感谢、评论&#xff1b;然后还可以对评论…...

Android Framework——zygote 启动 SystemServer

概述 在Android系统中&#xff0c;所有的应用程序进程以及系统服务进程SystemServer都是由Zygote进程孕育&#xff08;fork&#xff09;出来的&#xff0c;这也许就是为什么要把它称为Zygote&#xff08;受精卵&#xff09;的原因吧。由于Zygote进程在Android系统中有着如此重…...

在ubuntu上搭建SSH和FTP和NFS和TFTP

一、SSH服务搭建使用如下命令安装 SSH 服务&#xff1b;ssh 的配置文件为/etc/ssh/sshd_config&#xff0c;使用默认配置即可。sudo apt-get install openssh-server开启 SSH 服务以后我们就可以在 Windwos 下使用终端软件登陆到 Ubuntu&#xff0c;比如使用 Mobaxterm。二、FT…...

ThinkPHP 6.1 模板篇之文件加载

本文主要讲述模板中如何使用包含文件、引入css/js文件及路径优化。 包含文件 使用{include}标签来加载公用重复的文件&#xff0c;比如头部、尾部和导航部分 包含用法 1.创建公用文件 在模版 view 目录创建一个 common公共目录&#xff0c;分别创建 header、footer 和 nav …...

操作系统内核与安全分析课程笔记【1】链表、汇编与makefile

文章目录链表循环双向链表哈希链表其他链表汇编内联汇编扩展内联汇编makefile链表 链表是linux内核中关键的数据结构。在第二次课中&#xff0c;重点介绍了循环双向链表和哈希链表。这两种链表都在传统的双向链表的基础之上进行了针对效率的优化。(ps&#xff1a;这部分可以通…...

华为OD机试题 - 九宫格按键输入(JavaScript)| 机考必刷

更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:九宫格按键输入题目输入输出示例一输入输出说明示例二输入输出说…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

大数据驱动企业决策智能化的路径与实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;慌ZHANG-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、引言&#xff1a;数据驱动的企业竞争力重构 在这个瞬息万变的商业时代&#xff0c;“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...