防止按钮被频繁点击

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

                // 禁用按钮

            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就属…

flink学习(5)——预定义source

Collection [测试]--本地集合Source fromElements // env.fromElements// 使用这种方式的时候 后面的数据类型需要一致 // 1、 /* * 1、String 可以 2、Object 不行&#xff08;String&#xff0c;Float&#xff0c;Long不能同时传入&#xff09; * 3、数组可以 4、集合可…

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

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

基于 Nginx Ingress Controller 的四层(TCP)转发配置

基于 Nginx Ingress Controller 的四层&#xff08;TCP&#xff09;转发配置 1. 简介 本指南将展示如何通过配置 ConfigMap 来实现 Nginx Ingress Controller 的四层转发&#xff08;TCP&#xff09;&#xff0c;并通过配置测试应用程序验证配置的有效性。本文中使用的 Kuber…

生产Redis批量删除数据

生产Redis不能直接删除大量的Key&#xff0c;避免占用主线程阻塞正常业务&#xff0c;因此需要批量多次删除。一下代码经过生成磨炼&#xff0c;可以直接测试使用。 #!/bin/bash# Redis服务器地址 REDIS_HOST"127.0.0.1" # Redis端口 REDIS_PORT6379 # 匹配的键模式…

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

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

kafka+zookeeper集群搭建

kafkazookeeper集群搭建 规划 服务ip端口配置kafkazookeeper192.168.138.1512181/9092/2888/38882CPU、2G内存kafkazookeeper192.168.138.1522181/9092/2888/38882CPU、2G内存kafkazookeeper192.168.138.1532181/9092/2888/38882CPU、2G内存 开启端口,关闭selinux firewall…

书生大模型实训营第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;图书馆作为知识传播和学习的重…

GateWay使用手册

好的&#xff0c;下面是优化后的版本。为了提高可读性和规范性&#xff0c;我对内容进行了结构化、简化了部分代码&#xff0c;同时增加了注释说明&#xff0c;便于理解。 1. 引入依赖 在 pom.xml 中添加以下依赖&#xff1a; <dependencies><!-- Spring Cloud Gate…

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

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

PHP md5函数 生成的字符串是多少位的

PHP md5() 函数生成的是一个32位的十六进制字符串。 MD5 散列值通常以十六进制数字形式表示&#xff0c;为了保证散列值的唯一性和不可预测性&#xff0c;它们通常由0-9以及a-f的16个字符组成&#xff0c;总共是32个字符。 以下是PHP代码示例&#xff1a; $str "Hello,…

Next.js-样式处理

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

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

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

Kong API Gateway 深度解析与实战指南

1. 简介 1.1 什么是Kong API Gateway&#xff1f; Kong 是一款广泛使用的开源 API Gateway 和微服务管理工具&#xff0c;最初由 Mashape&#xff08;现为 Kong Inc.&#xff09;在 2015 年推出。它基于 Nginx 和 OpenResty 构建&#xff0c;旨在为现代应用程序提供高性能、可…

Three.js渲染较大的模型之解决方案

文章目录 Three.js渲染较大的模型 解决方案视锥体剔除实例 和 遮挡剔除 实例视锥体剔除&#xff08;Frustum Culling&#xff09;实例原理概述代码示例解释 遮挡剔除&#xff08;Occlusion Culling&#xff09;实例原理概述代码示例解释 three.js 模型压缩 Three.js渲染较大的模…