防止按钮被频繁点击

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

// 禁用按钮

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

即可实现功能

相关推荐
IT_陈寒11 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
咖啡续命又一天18 分钟前
python 自动化采集 ChromeDriver 安装
开发语言·python·自动化
只_只27 分钟前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience32 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹33 分钟前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo34 分钟前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse35 分钟前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye40 分钟前
前端架构师,是架构什么
前端·架构
全马必破三42 分钟前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库1 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库