防止按钮被频繁点击

embedded/2024/11/30 1:28:14/

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

                // 禁用按钮

            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.ppmy.cn/embedded/141617.html

相关文章

各种排序算法

前置知识 排序: 按照递增或者递减的顺序把数据排列好 稳定性: 值相等的元素在排序之后前后顺序是否发生了改变 内部排序: 数据放在内存上 外部排序: 数据放在磁盘上 内部排序 基于比较的排序 几大排序算法 1. 堆排序 特点: 思想: 1. 创建大根堆,把所有元素放在大根堆里…

遗传算法与深度学习实战(25)——使用Keras构建卷积神经网络

遗传算法与深度学习实战(25)——使用Keras构建卷积神经网络 0. 前言1. 卷积神经网络基本概念1.1 卷积1.2 步幅1.3 填充1.4 激活函数1.5 池化 2. 使用 Keras 构建卷积神经网络3. CNN 层的问题4. 模型泛化小结系列链接 0. 前言 卷积神经网络 (Convolution…

【计网】自定义协议与序列化(一) —— Socket封装于服务器端改写

🌎 应用层自定义协议与序列化 文章目录: Tcp协议Socket编程 应用层简介 序列化和反序列化       重新理解read/write/recv/send及tcp的全双工       Socket封装       服务器端改写 🚀应用层简介 我们程序员写的一个个解决…

【论文阅读】Learning to Learn Task-Adaptive Hyperparameters for Few-Shot Learning

学习任务自适应超参数以实现小样本学习 引用:Baik, Sungyong, et al. “Learning to learn task-adaptive hyperparameters for few-shot learning.” IEEE Transactions on Pattern Analysis and Machine Intelligence 46.3 (2023): 1441-1454. 论文地址&#xff1…

什么是第4层(TCP/UDP)和第7层(HTTP/HTTPS)

第4层(TCP/UDP)和第7层(HTTP/HTTPS)是OSI模型中不同层级的术语。OSI(Open Systems Interconnection)模型是一种网络通信的分层模型,将网络通信过程分为七个层级,每个层级承担不同的功…

Redis开发04:Redis的INFO信息解析

命令解释redis_versionRedis 的版本号,这里是 3.2.100。redis_git_sha1Redis 使用的 Git SHA1 校验值,表示当前代码的版本。redis_git_dirty如果 Redis 当前运行的代码是脏版本(未提交的修改),该值为 1,否则…

【docker】8. 镜像仓库实战

综合实战一:搭建一个 nginx 服务 Web 服务器 Web 服务器,一般是指“网站服务器”,是指驻留于互联网上某种类型计算机的程序。Web 服务器可以向 Web 浏览器等客户端提供文档,也可以放置网站文件,让全世界浏览&#xf…

C#里怎么样使用多线程读取多文件?

C#里怎么样使用多线程读取多文件? 多线程在读取文件过程中,可能不存在读取快的优势,不过可以把工作分时进行,不影响界面的工作。 在这里演示两个线程, 每个线程分别读取一个文件, 要注意两个线程的同步,都需要两个线程结束之后,才能进行文件内容的操作。 这里主要比较…