防止按钮被频繁点击

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

// 禁用按钮

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);

即可实现功能

相关推荐
chimpro1 分钟前
都2025年了还不会flex?一篇文章带你理顺flex!
前端
LeeAt1 分钟前
AI单词拍照识别移动端项目(一)
前端·react.js·ai编程
Mintopia9 分钟前
三维空间的 “切蛋糕大师”:八叉树的底层奥秘与妙用
前端·javascript·计算机图形学
布兰妮甜21 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
weixin_4373982121 分钟前
转Go学习笔记
linux·服务器·开发语言·后端·架构·golang
Mintopia21 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
StrongerIrene31 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子40 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
风逸hhh43 分钟前
python打卡day58@浙大疏锦行
开发语言·python
eric*16881 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹