防止按钮被频繁点击

在做开发的时候,不希望按钮被用户频繁点击,给后端服务器增加负担,这个时候,可以在按钮的触发函数加上如下代码:
 

                // 禁用按钮

            const fetchButton = document.querySelector('.btn-fetch');

            fetchButton.disabled = true;

            // 延时61秒后重新启用按钮

            setTimeout(() => {

                fetchButton.disabled = false;

            }, 6000);
或者:
 

        // 禁用按钮

            const fetchButton = document.querySelector('#downloadButton1');

            fetchButton.disabled = true;

            // 延时6秒后重新启用按钮

            setTimeout(() => {

                fetchButton.disabled = false;

            }, 6000);

这里的querySelector后面筛选的是按钮的类或者id,
比如:

id为btnFetchMetrics的按钮,点击后触发函数:fetchMetrics()
此时如果希望这个按钮被频繁点击时,每六秒仅生效一次,只需在函数fetchMetrics()下面加上如下代码:

const fetchButton = document.querySelector('#btnFetchMetrics');

    fetchButton.disabled = true;

    // 延时6秒后重新启用按钮

    setTimeout(() => {

        fetchButton.disabled = false;

    }, 6000);

即可实现功能

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

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

相关文章

Spring Boot【三】

自动注入 xml中可以在bean元素中通过autowire属性来设置自动注入的方式&#xff1a; <bean id"" class"" autowire"byType|byName|constructor|default" /> byName&#xff1a;按照名称进行注入 byType&#xff1a;按类型进行注入 constr…

构建 LLM (大型语言模型)应用程序——从入门到精通(第七部分:开源 RAG)

通过检索增强生成 (RAG) 应用程序的视角学习大型语言模型 (LLM)。 本系列博文 简介数据准备句子转换器矢量数据库搜索与检索大语言模型开源 RAG&#xff08;本帖&#xff09;评估服务LLM高级 RAG 1. 简介 我们之前的博客文章广泛探讨了大型语言模型 (LLM)&#xff0c;涵盖了其…

【Python入门】Python数据类型

文章一览 前言一、变量1.1.如何使用变量1.2.如何定义变量的名字&#xff08;标识符&#xff09; 二、数据类型2.1 整型数据2.2 浮点型数据2.3 布尔型&#xff08;bool&#xff09;数据2.4 复数型数据2.5 字符串类型1 > 字符串相加&#xff08;合并&#xff09;&#xff08;&…

第1章-JVM和Java体系架构

虚拟机 虚拟机概念 所谓虚拟机&#xff08;Virtual Machine&#xff09;&#xff0c;就是一台虚拟的计算机。它是一款软件&#xff0c;用来执行一系列虚拟计算机指令。大体上&#xff0c;虚拟机可以分为系统虚拟机和程序虚拟机。 大名鼎鼎的Virtual Box&#xff0c;VMware就属…

【H2O2|全栈】Node.js(2)

目录 前言 开篇语 准备工作 npm 概念 常见指令 项目中的包 创建项目 启动项目 服务器搭建 express 基本步骤 搭建应用 创建路由 监听端口 启动服务器 面试相关 结束语 前言 开篇语 本系列博客分享Node.js的相关知识点&#xff0c;本章讲解npm与服务器的简单…

JDK的版本演化,JDK要收费吗?

Java版本演化历史 Java的版本历史可以追溯到1995年&#xff0c;以下是Java语言自诞生以来的主要版本及其关键特性&#xff1a; 一、早期版本 Java 1.0&#xff08;1996年1月发布&#xff09; 引入了Java虚拟机&#xff08;JVM&#xff09;和Java应用编程接口&#xff08;API&…

书生大模型实训营第4期进阶岛第三关:LMDeploy 量化部署进阶实践

书生大模型实训营第4期进阶岛第三关&#xff1a;LMDeploy 量化部署进阶实践 1. 配置 LMDeploy 环境1.1 开发机的创建与环境搭建1.2 模型获取1.3 模型测试 2. InternLM2.5 的部署与量化2.1 LMDeploy API 部署 InternLM2.52.1.1 启动API服务器2.1.2 以命令行形式连接 API 服务器2…

visionpro官方示例分析(一) 模板匹配工具 缺陷检测工具

1.需求&#xff1a;找出图像中的这个图形。 2.步骤 使用CogPMAlignTool工具&#xff0c;该工具是模板匹配工具&#xff0c;见名知意&#xff0c;所谓模板匹配工具就是说先使用该工具对一张图像建立模板&#xff0c;然后用这个模板在其他图像上进行匹配&#xff0c;匹配上了就说…

Z2400027基于Java+SpringBoot+Mysql+thymeleaf引擎的图书馆管理系统的设计与实现 代码 论文

图书馆管理系统的设计与实现 一、项目背景与简介二、系统总体功能三、运行环境与技术选型四、系统架构与模块划分五、系统界面截图六、源码获取 一、项目背景与简介 项目背景&#xff1a; 随着信息技术的不断发展和图书资源的日益丰富&#xff0c;图书馆作为知识传播和学习的重…

详谈面试题:Vue、React为什么使用虚拟DOM

虚拟DOM是一种在前端框架中广泛使用的技术&#xff0c;它可以提升开发效率。那么国外流行的框架svelte没有使用虚拟DOM&#xff0c;而是直接操作真实DOM&#xff0c;效率依然很高。为什么Vue和React不采用这种方式呢&#xff1f; 目录 一、框架设计 二、解耦运行环境 三、总…

Next.js-样式处理

#题引&#xff1a;我认为跟着官方文档学习不会走歪路 Next.js 支持多种为应用程序添加样式的方法&#xff0c;包括&#xff1a; CSS Modules&#xff1a;创建局部作用域的 CSS 类&#xff0c;避免命名冲突并提高可维护性。全局 CSS&#xff1a;使用简单&#xff0c;对于有传统…

神经网络中的损失函数(Loss Function)

损失函数&#xff08;Loss Function&#xff09;在机器学习和深度学习中扮演着至关重要的角色&#xff0c;它是衡量模型预测值与实际值之间差异程度的函数。通过最小化损失函数&#xff0c;我们可以优化模型的参数&#xff0c;使其预测结果更加准确。 一、损失函数的定义 损失函…

AWS账户是否支持区域划分?

在云计算的世界中&#xff0c;亚马逊网络服务&#xff08;AWS&#xff09;凭借其全球化的基础设施和丰富的服务选项受到许多企业和开发者的青睐。一个常见的问题是&#xff1a;AWS账户是否支持区域划分&#xff1f;为了回答这个问题&#xff0c;我们九河云一起深入了解AWS的区域…

鼠标前进后退键改双击,键盘映射(AutoHotkey)

初衷&#xff1a; 1.大部分鼠标为不可自定义按键&#xff0c;可以自定义的又很贵。 鼠标左键是双击是很频类很高的操作&#xff0c;鼠标前进/后退按键个人感觉使用频率很低&#xff0c;因此把鼠标前进/后退改为双击还是很合适的。 2.有些短款的键盘没有Home或End键&#xff0c;…

华为海思2025届校招笔试面试经验分享

目前如果秋招还没有offer的同学&#xff0c;可以赶紧投递下面这些公司&#xff0c;都在补招。争取大家年前就把后端offer拿下。如果大家在准备秋招补录取过程中有任何问题&#xff0c;都可以私信小编&#xff0c;免费提供帮助。如果还有部分准备备战春招的同学&#xff0c;也可…

Springboot项目搭建(7)-Layout界面布局

1.概要 初步搭建了Layout界面的布局&#xff0c;其中包括左侧导航栏及其路由功能&#xff0c;和右侧头、体、脚部分的大致排版。最后在头部分中的昵称与头像替换成动态数据。 2.Layout主页布局 文件地址&#xff1a;src\views\Layout.vue 2.1 script行为模块 从elementUI中…

c语言的qsort函数理解与使用

介绍&#xff1a;qsort 函数是 C 标准库中用于排序的快速排序算法函数。它的用法非常灵活&#xff0c;可以对任意类型的元素进行排序&#xff0c;只要提供了比较函数即可。 qsort 函数原型及参数解释&#xff1a; void qsort ( void* base, //指向要排序的数组的首元素…

#渗透测试#红蓝攻防#HW#漏洞挖掘#漏洞复现01-笑脸漏洞(vsftpd)

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

(73)脉冲幅度调制PAM调制解调通信系统的MATLAB仿真

文章目录 前言一、PAM调制的基本原理二、PAM调制的步骤三、PAM调制示例四、PAM调制的应用五、MATLAB仿真1. 仿真代码2. 仿真结果 总结 前言 PAM&#xff08;Pulse Amplitude Modulation&#xff0c;脉冲振幅调制&#xff09;是一种模拟信号到数字信号的转换方式&#xff0c;它…

算法的NPU终端移植:深入探讨与实践指南

目录 ​编辑 引言 算法选择 模型压缩 权重剪枝 量化 知识蒸馏 硬件适配 指令集适配 内存管理 并行计算 性能测试 速度测试 精度测试 功耗测试 案例分析 图像识别算法的NPU移植案例 结论 引言 在人工智能技术的浪潮中&#xff0c;神经网络处理器&#xff08;…