防止按钮被频繁点击

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

// 禁用按钮

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

即可实现功能

相关推荐
Darenm11124 分钟前
python进程,线程与协程
java·开发语言
_请输入用户名30 分钟前
EventEmitter 是广播,Tapable 是流水线:聊聊它们的本质区别
前端·设计模式
爱学习的茄子31 分钟前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
龙在天32 分钟前
我是前端,我来总结一下前端 配 Nginx 的一些案例
前端
凤年徐33 分钟前
C++类和对象(上):从设计图到摩天大楼的构建艺术
c语言·开发语言·c++·类和对象
Thetimezipsby35 分钟前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
從南走到北1 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
掘金安东尼1 小时前
前端周刊430期(2025年9月1日–9月7日)
前端
落日漫游1 小时前
K8s资源管理:高效管控CPU与内存
java·开发语言·kubernetes