前端HTML中防止用户在短时间内频繁多次点击按钮

基本思想：

就是禁止用户在短时间多次点击点击按钮，致使后端多次执行重复的操作，所以要在用户点击后一定时间内将按钮禁用。可以用定时器实现，一定时间之后用户可再次点击按钮。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Short Time Disable Button</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head>
<body>
<button onclick="shortTimeDisableButton(3, this)">Access</button>
<script>function shortTimeDisableButton(second, that){$(that).attr('disabled',true);let startInterval = setInterval(function() {$(that).attr('disabled',false);clearInterval(startInterval);}, 1000*second);}
</script>
</body>
</html>

效果

点击后：

3秒后：

前端HTML中防止用户在短时间内频繁多次点击按钮相关推荐

Django----将后端数据展示在前端页面（展示用户列表及详情页）
需求描述: 如下图,将后台数据库中的用户列表数据展示出来,点击某用户后,进入信息详情页面解决方案: 涉及知识点:模板语言 django除了可以渲染html语言,还支持模板语言: {% for use ...
Vue 中实现点击按钮
在 Vue 中实现点击按钮复制功能: 因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太 ...
前端开发中Cookie那些事儿
前段时间做了项目,在前端实现中频繁的操作cookie,记录几点供大家参考! cookie操作在前端开发过程中经常遇到,当然如果只是用来存储一些简单用户数据,还是比较简单的,我们要做的可能只是设置coo ...
潜伏在前端巅峰中同出来的前端秘笈
其实标题应该叫,Web 用户体验设计提升指南. 一个 Web 页面,一个 APP,想让别人用的爽,也就是所谓的良好的用户体验,我觉得他可能包括但不限于: 急速的打开速度眼前一亮的 UI 设计酷炫的 ...
前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
android_通过高级应用程序开发策略在Android中进行用户参与
android 用户参与Android应用程序开发的重要性不可过分强调,因为这正是使生态系统得以持续发展的原因. 这就是移动应用程序开发的价值所在. 如果没有吸引和留住他们的战略计划,品牌就无需花费巨 ...
自动化监控--zabbix中的用户和用户组详解
用户和用户组 Zabbix 中的所有用户都通过 Web 页面去访问 Zabbix 应用程序.并为每个用户分配唯一的登陆名和密码. 所有用户的密码都被加密并储存于 Zabbix 数据库中.用户不能使用其 ...
Ifvisible.js – 判断网页中的用户是闲置还是活动状态
ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...
初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

前端HTML中防止用户在短时间内频繁多次点击按钮

前端HTML中防止用户在短时间内频繁多次点击按钮

基本思想：

代码

效果

前端HTML中防止用户在短时间内频繁多次点击按钮相关推荐

最新文章

热门文章