Vue + Element 实现按钮指定间隔时间点击
1、业务需求
需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次
2、思路
加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮
3、实现
1)vue页面
<template><el-row :gutter="15"><el-col :span="4"><el-buttontype="danger"icon="el-icon-download" @click="getData":loading="getDataLoading">获取数据</el-button></el-col></el-row>
</template><script type="text/ecmascript-6">
import { GetDataInfo } from '@/api/xxx'export default {data () {return {getDataLoading: false,}},methods: {// 获取数据按钮,10分钟内执行一次(本地缓存)async getData () {const storedTime = localStorage.getItem('lastClickGetDataTime') const currentTime = Date.now() // 时间戳(秒级)if (!storedTime || (currentTime - storedTime) / 1000 / 60 >= 10) {// 如果存储的时间不存在或者距离上次点击时间超过10分钟,则执行按钮点击操作 this.getDataLoading = truetry {await GetDataInfo({})} catch (error) {this.getDataLoading = false}this.getDataLoading = falselocalStorage.setItem('lastClickGetDataTime', currentTime) } else { // 距离上次点击时间小于10分钟,不做任何操作或给出提示 this.$message({ message: '请在十分钟后再点击按钮', type: 'warning',})}},},
}
</script>
// 注:指定时间可以根据需要更新,比如1分钟内只能点击一次,只需要将循环部分改为
if (!storedTime || (currentTime - storedTime) / 1000 >= 60)
2) 效果

希望以上内容能够帮助你使用Vue + Element 实现按钮指定间隔时间点击。欢迎点赞、关注、收藏,如果你还有其他问题,欢迎评论区交流。
相关文章:
Vue + Element 实现按钮指定间隔时间点击
1、业务需求 需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次 2、思路 加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮 3、实现 1)vue页面 <template>&l…...
UE Websocket笔记
参考链接 [UE4 C入门到进阶]12.Websocket网络通信 - 哔哩哔哩 包含怎么用Nodejs 写测试服务器 UE4_使用WebSocket和Json(上) - 知乎 包含Python写测试服务器 UE4_使用WebSocket和Json(下) - 知乎 示例代码 xxx.Build.cs"W…...
STM32h7 接收各种can id情况下滤波器的配置
1、接收所有数据 /* 此处id2都为0,不进行id校验,接收所有数据*/ static void CAN_Filter_Config(void){FDCAN_FilterTypeDef sFilterConfig1;/* Configure Rx filter */sFilterConfig1.IdType FDCAN_STANDARD_ID;sFilterConfig1.FilterIndex 0;sFilte…...
《深入理解计算机系统》学习笔记 - 第三课 - 浮点数
Floating Point 浮点数 文章目录 Floating Point 浮点数分数二进制示例能代表的数浮点数的表示方式浮点数编码规格化值规格化值编码示例 非规格化的值特殊值 示例IEEE 编码的一些特殊属性四舍五入,相加,相乘四舍五入四舍五入的模式二进制数的四舍五入 浮…...
总结:服务器批量处理http请求的大致流程
总结:服务器批量处理http请求的大致流程 一客户端发起请求:可以多个请求同时发送二Web服务器解析请求(如:Nginx):可以多个请求同时解析三Servlet容器接收请求(如:tomcat)…...
算法通关村第十八关-青铜挑战回溯是怎么回事
大家好我是苏麟 , 今天聊聊回溯是怎么个事 . 回溯是最重要的算法思想之一,主要解决一些暴力枚举也搞不定的问题,例如组合、分割、子集、排列,棋盘等。从性能角度来看回溯算法的效率并不高,但对于这些暴力都搞不定的算法能出结果就…...
区分node,npm,nvm
目录 一,nodejs二,npm三,nvm 区分node,npm,nvm 几年前学习前端的时候学习的就是htmlcssjs 三件套。 现在只学习这些已经不能满足需要了。 一,nodejs nodejs是编程语言javascript运行时环境。(比…...
7-2 小霸王
幼儿园的老师给几位小朋友等量的长方体橡皮泥,但有个小朋友(小霸王)觉得自己的橡皮泥少了,就从另一个小朋友那里抢了一些。请问,是哪个小霸王抢了哪个小朋友的橡皮泥? 输入格式: 测试数据有多组。对于每组…...
Linux内核上游提交完整流程及示例
参考博客文章: 向linux内核提交代码 - 知乎 一、下载Linux内核源码 通过git下载Linux内核源码,具体命令如下: git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git 实际命令及结果如下: penghaoDin…...
TS学习——快速入门
TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,任何的JS代码都可以直…...
深圳锐科达风力发电广播对讲解决方案
深圳锐科达风力发电广播对讲解决方案 风力发电对讲通常是在风塔的底部与机舱室安装一键对讲终端,可以一键呼叫控制中心值班人员,结构简单,组网方便,设备可以接入局域网或广域网构成功能应急呼叫系统。 系统实现的功能࿱…...
极智芯 | 解读国产AI算力 璧仞产品矩阵
欢迎关注我,获取我的更多经验分享 大家好,我是极智视界,本文分享一下 解读国产AI算力 璧仞产品矩阵。 璧仞在国产 AI 芯领域就是 "迷" 一样的存在,你要说它在市场上的 "建树" 泛善可陈的话,它又 "赫然" 在美国芯片禁令名单中。而这一切的一…...
Echarts折线图常见问题及案例代码
前言 ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以帮助用户以简单的方式创建复杂的时间序列、条形图、饼图、地图等图形。 初学者,可参考下我的另外两篇文章,从基础到深入,解读饼状图的运用。 ECharts初始案例(入门) ECharts之折线图 常见问题及案例代码 …...
javaTCP协议实现一对一聊天
我们首先要完成服务端,不然出错,运行也要先运行服务端,如果不先连接服务端,就不监听,那客户端不知道连接谁 服务端 package d21z; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.a…...
机器学习应用 | 使用 MATLAB 进行异常检测(上)
异常检测任务,指的是检测偏离期望行为的事件或模式,可以是简单地检测数值型数据中,是否存在远超出正常取值范围的离群值,也可以是借助相对复杂的机器学习算法识别数据中隐藏的异常模式。 在不同行业中,异常检测的典型…...
Java -jar参数详解
java -jar 命令用于执行打包成可执行 JAR 文件的 Java 应用程序。在运行时,你可以通过命令行传递参数给这个应用程序。 1. -jar 参数: 说明: 指定要执行的 JAR 文件。示例:java -jar your-application.jar 2. -D 参数ÿ…...
RocksDB 在 vivo 消息推送系统中的实践
作者:vivo 互联网服务器团队 - Zeng Luobin 本文主要介绍了 RocksDB 的基础原理,并阐述了 RocksDB 在vivo消息推送系统中的一些实践,通过分享一些对 RocksDB 原生能力的探索,希望可以给使用RocksDB的读者带来启发。 一、背景 在…...
【C进阶】C程序是怎么运作的呢?-- 程序环境和预处理(上)
前言: 由于c语言的程序编译链接的这块知识点不清楚,回来复习一遍,以便于好理解c知识,我会尽快更新下一篇文章。 目录 1.程序的翻译环境和执行环境 2.翻译环境(编译链接) 编译(编译器…...
点滴生活记录1
2023/10/10 今天骑小电驴上班,带着小鸭子一起。路上的时候,我给小鸭子说,你要帮我看着点路,有危险的时候提醒我,也就刚说完没几分钟,一个没注意,直接撞到一个拦路铁墩子上,车子连人歪…...
gitea仓库迁移
(1)先安装git,再直接将源机器上的gitea文件夹复制到新机器上。这样原始数据及账号信息都还在。 (2)根据实际情况修改gitea\custom\conf\app.ini文件夹下app.ini文件的相关路径。 (3)如下命令启…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
