防止按钮被频繁点击

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

// 禁用按钮

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

即可实现功能

相关推荐
断竿散人1 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼2 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
月亮慢慢圆2 分钟前
拖拽API
前端
知了一笑3 分钟前
独立做产品,做一个,还是做多个找爆款?
前端·后端·产品
uhakadotcom4 分钟前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
_AaronWong4 分钟前
Electron 桌面应用侧边悬浮窗口设计与实现
前端·electron
玲小珑7 分钟前
LangChain.js 完全开发手册(九)LangGraph 状态图与工作流编排
前端·langchain·ai编程
鹏多多8 分钟前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
JarvanMo8 分钟前
用 `alice` 来检查 Flutter 中的 HTTP 调用
前端
小图图16 分钟前
Claude Code 黑箱揭秘
前端·后端