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

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、业务需求 需要加一个按钮&#xff0c;调用第三方API&#xff0c;按钮十分钟之内只能点击一次&#xff0c;刷新页面也只能点击一次 2、思路 加一个本地缓存的时间戳&#xff0c;通过时间戳计算指定时间内不能点击按钮 3、实现 1&#xff09;vue页面 <template>&l…...

UE Websocket笔记

参考链接 [UE4 C入门到进阶]12.Websocket网络通信 - 哔哩哔哩 包含怎么用Nodejs 写测试服务器 UE4_使用WebSocket和Json&#xff08;上&#xff09; - 知乎 包含Python写测试服务器 UE4_使用WebSocket和Json&#xff08;下&#xff09; - 知乎 示例代码 xxx.Build.cs"W…...

STM32h7 接收各种can id情况下滤波器的配置

1、接收所有数据 /* 此处id2都为0&#xff0c;不进行id校验&#xff0c;接收所有数据*/ 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 编码的一些特殊属性四舍五入&#xff0c;相加&#xff0c;相乘四舍五入四舍五入的模式二进制数的四舍五入 浮…...

总结:服务器批量处理http请求的大致流程

总结&#xff1a;服务器批量处理http请求的大致流程 一客户端发起请求&#xff1a;可以多个请求同时发送二Web服务器解析请求&#xff08;如&#xff1a;Nginx&#xff09;&#xff1a;可以多个请求同时解析三Servlet容器接收请求&#xff08;如&#xff1a;tomcat&#xff09;…...

算法通关村第十八关-青铜挑战回溯是怎么回事

大家好我是苏麟 , 今天聊聊回溯是怎么个事 . 回溯是最重要的算法思想之一&#xff0c;主要解决一些暴力枚举也搞不定的问题&#xff0c;例如组合、分割、子集、排列&#xff0c;棋盘等。从性能角度来看回溯算法的效率并不高&#xff0c;但对于这些暴力都搞不定的算法能出结果就…...

区分node,npm,nvm

目录 一&#xff0c;nodejs二&#xff0c;npm三&#xff0c;nvm 区分node&#xff0c;npm&#xff0c;nvm 几年前学习前端的时候学习的就是htmlcssjs 三件套。 现在只学习这些已经不能满足需要了。 一&#xff0c;nodejs nodejs是编程语言javascript运行时环境。&#xff08;比…...

7-2 小霸王

幼儿园的老师给几位小朋友等量的长方体橡皮泥&#xff0c;但有个小朋友&#xff08;小霸王&#xff09;觉得自己的橡皮泥少了&#xff0c;就从另一个小朋友那里抢了一些。请问&#xff0c;是哪个小霸王抢了哪个小朋友的橡皮泥&#xff1f; 输入格式: 测试数据有多组。对于每组…...

Linux内核上游提交完整流程及示例

参考博客文章&#xff1a; 向linux内核提交代码 - 知乎 一、下载Linux内核源码 通过git下载Linux内核源码&#xff0c;具体命令如下&#xff1a; git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git 实际命令及结果如下&#xff1a; penghaoDin…...

TS学习——快速入门

TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展&#xff0c;向JS中引入了类型的概念&#xff0c;并添加了许多新的特性。TS代码需要通过编译器编译为JS&#xff0c;然后再交由JS解析器执行。TS完全兼容JS&#xff0c;换言之&#xff0c;任何的JS代码都可以直…...

深圳锐科达风力发电广播对讲解决方案

深圳锐科达风力发电广播对讲解决方案 风力发电对讲通常是在风塔的底部与机舱室安装一键对讲终端&#xff0c;可以一键呼叫控制中心值班人员&#xff0c;结构简单&#xff0c;组网方便&#xff0c;设备可以接入局域网或广域网构成功能应急呼叫系统。 系统实现的功能&#xff1…...

极智芯 | 解读国产AI算力 璧仞产品矩阵

欢迎关注我,获取我的更多经验分享 大家好,我是极智视界,本文分享一下 解读国产AI算力 璧仞产品矩阵。 璧仞在国产 AI 芯领域就是 "迷" 一样的存在,你要说它在市场上的 "建树" 泛善可陈的话,它又 "赫然" 在美国芯片禁令名单中。而这一切的一…...

Echarts折线图常见问题及案例代码

前言 ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以帮助用户以简单的方式创建复杂的时间序列、条形图、饼图、地图等图形。 初学者,可参考下我的另外两篇文章,从基础到深入,解读饼状图的运用。 ECharts初始案例(入门) ECharts之折线图 常见问题及案例代码 …...

javaTCP协议实现一对一聊天

我们首先要完成服务端&#xff0c;不然出错&#xff0c;运行也要先运行服务端&#xff0c;如果不先连接服务端&#xff0c;就不监听&#xff0c;那客户端不知道连接谁 服务端 package d21z; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.a…...

机器学习应用 | 使用 MATLAB 进行异常检测(上)

异常检测任务&#xff0c;指的是检测偏离期望行为的事件或模式&#xff0c;可以是简单地检测数值型数据中&#xff0c;是否存在远超出正常取值范围的离群值&#xff0c;也可以是借助相对复杂的机器学习算法识别数据中隐藏的异常模式。 在不同行业中&#xff0c;异常检测的典型…...

Java -jar参数详解

java -jar 命令用于执行打包成可执行 JAR 文件的 Java 应用程序。在运行时&#xff0c;你可以通过命令行传递参数给这个应用程序。 1. -jar 参数&#xff1a; 说明&#xff1a; 指定要执行的 JAR 文件。示例&#xff1a;java -jar your-application.jar 2. -D 参数&#xff…...

RocksDB 在 vivo 消息推送系统中的实践

作者&#xff1a;vivo 互联网服务器团队 - Zeng Luobin 本文主要介绍了 RocksDB 的基础原理&#xff0c;并阐述了 RocksDB 在vivo消息推送系统中的一些实践&#xff0c;通过分享一些对 RocksDB 原生能力的探索&#xff0c;希望可以给使用RocksDB的读者带来启发。 一、背景 在…...

【C进阶】C程序是怎么运作的呢?-- 程序环境和预处理(上)

前言&#xff1a; 由于c语言的程序编译链接的这块知识点不清楚&#xff0c;回来复习一遍&#xff0c;以便于好理解c知识&#xff0c;我会尽快更新下一篇文章。 目录 1.程序的翻译环境和执行环境 2.翻译环境&#xff08;编译链接&#xff09; 编译&#xff08;编译器&#xf…...

点滴生活记录1

2023/10/10 今天骑小电驴上班&#xff0c;带着小鸭子一起。路上的时候&#xff0c;我给小鸭子说&#xff0c;你要帮我看着点路&#xff0c;有危险的时候提醒我&#xff0c;也就刚说完没几分钟&#xff0c;一个没注意&#xff0c;直接撞到一个拦路铁墩子上&#xff0c;车子连人歪…...

gitea仓库迁移

&#xff08;1&#xff09;先安装git&#xff0c;再直接将源机器上的gitea文件夹复制到新机器上。这样原始数据及账号信息都还在。 &#xff08;2&#xff09;根据实际情况修改gitea\custom\conf\app.ini文件夹下app.ini文件的相关路径。 &#xff08;3&#xff09;如下命令启…...

全平台网络资源下载神器:一键获取微信视频号、抖音、QQ音乐等热门内容

全平台网络资源下载神器&#xff1a;一键获取微信视频号、抖音、QQ音乐等热门内容 【免费下载链接】res-downloader 资源下载器、网络资源嗅探&#xff0c;支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: http…...

Llama-3.2V-11B-cot从零部署:Docker镜像运行与端口映射详解

Llama-3.2V-11B-cot从零部署&#xff1a;Docker镜像运行与端口映射详解 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。它针对双卡4090环境进行了深度优化&#xff0c;特别适合想要体验Llama多模态大模型但缺乏专业部署…...

防火墙旁挂模式实战:用华为模拟器ENSP搭建VRF+OSPF实验环境(保姆级)

华为eNSP防火墙旁挂模式全实战&#xff1a;从VRF设计到流量抓包分析 在企业网络架构中&#xff0c;防火墙的部署方式直接影响网络安全策略的实施效果。旁挂模式作为一种灵活部署方案&#xff0c;既能实现流量精细化管控&#xff0c;又避免了单点故障风险。本文将带您使用华为eN…...

VSCode里藏着的绘图神器:Live Preview搭配Mermaid插件,边写代码边出图真香了

VSCode绘图革命&#xff1a;用Mermaid实现代码与图表无缝协同 在IDE里切换窗口查看流程图的日子该结束了。作为每天与代码打交道的开发者&#xff0c;我们早已厌倦了在Visio、ProcessOn和代码编辑器之间反复横跳的繁琐操作。Mermaid语法配合VSCode的实时预览功能&#xff0c;正…...

力扣原题《有效的数独游戏》,纯手搓,已验证

请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; 注…...

GLM-OCR场景应用:教育资料数字化、商务文档信息抽取实战

GLM-OCR场景应用&#xff1a;教育资料数字化、商务文档信息抽取实战 1. 引言&#xff1a;文档智能化的时代需求 在信息爆炸的今天&#xff0c;我们每天都要处理大量纸质文档和电子文件。教育机构需要将历年试卷数字化归档&#xff0c;企业财务部门要处理堆积如山的发票和合同…...

OpCore Simplify:终极指南!让黑苹果配置从8小时缩短到45分钟的自动化神器

OpCore Simplify&#xff1a;终极指南&#xff01;让黑苹果配置从8小时缩短到45分钟的自动化神器 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在…...

【JavaWeb开发】从零构建前后端交互实战指南

1. JavaWeb前后端交互基础入门 第一次接触JavaWeb开发时&#xff0c;最让我困惑的就是前后端如何传递数据。记得刚开始做项目时&#xff0c;我傻乎乎地用字符串拼接HTML代码返回给前端&#xff0c;结果遇到中文乱码问题折腾了一整天。后来才发现&#xff0c;现代JavaWeb开发早已…...

Mplus实战:如何用随机截距交叉滞后模型(RI-CLPM)分析心理学纵向数据?

Mplus实战&#xff1a;随机截距交叉滞后模型&#xff08;RI-CLPM&#xff09;在心理学纵向研究中的深度应用 心理学研究中&#xff0c;我们常常需要探索变量间的动态相互作用——比如焦虑和睡眠问题如何相互影响&#xff1f;传统交叉滞后模型&#xff08;CLPM&#xff09;虽然广…...

OpenRGB:统一多品牌设备控制的开源RGB解决方案

OpenRGB&#xff1a;统一多品牌设备控制的开源RGB解决方案 【免费下载链接】OpenRGB Open source RGB lighting control that doesnt depend on manufacturer software. Supports Windows, Linux, MacOS. Mirror of https://gitlab.com/CalcProgrammer1/OpenRGB. Releases can …...