限制 button 在 3 秒内不可重复点击
在下载或者上传文件过程中避免重复点击带来的多次同样的请求造成资源浪费,限制 button 的点击次数是很有必要的。 1. 增强用户体验,2. 减轻服务器压力。
HTML 代码
<button id = "test">下载或上传按钮</button>
JS 代码
var foo = function(element) {
var intent = document.querySelector(element)
intent.disabled = 'disabled'
setTimeout(function() {
intent.disabled = ''
}, 3000) /* 可以把 3000 改成自定义的时间*/
console.log('3 秒内不可以重复点击')
}
var bar = function(fun, select) {
var intent = document.querySelector('#test')
intent.addEventListener('click', function() {
fun(select)
})
}
bar(foo, "#test")
限制 button 在 3 秒内不可重复点击的更多相关文章
- OAF 使用 javascript 使某个按钮在5秒内不能重复点击
首先要保证按钮是BUTTON,并且按钮事件设置firePartialAction. public class CuxXXXXPGCO extends OAControllerImpl { public ...
- 使用js使某个按钮在5秒内不能重复点击
<head> <!--参考:http://illy.iteye.com/blog/1534276 --> <!-- http://y.dobit.top/Detail/1 ...
- iOS小技巧–用runtime 解决UIButton 重复点击问题
什么是这个问题 我们的按钮是点击一次响应一次, 即使频繁的点击也不会出问题, 可是某些场景下还偏偏就是会出问题. 通常是如何解决 我们通常会在按钮点击的时候设置这个按钮不可点击. 等待0.xS的延时后 ...
- iOS小技巧:用runtime 解决UIButton 重复点击问题
http://www.cocoachina.com/ios/20150911/13260.html 作者:uxyheaven 授权本站转载. 什么是这个问题 我们的按钮是点击一次响应一次, 即使频繁的 ...
- js 实现控制点击事件在特定的毫秒内 只允许点击一次(防止重复点击)
代码 第一种方法 var forbidRepeartClick = (function(){ var instance = null; var canClick = true; function Bu ...
- 通向高可扩展性之路(推特篇) ---- 一个推特用来支撑1亿5千万活跃用户、30万QPS、22MB每秒Firehose、以及5秒内推送信息的架构
原文链接:http://highscalability.com/blog/2013/7/8/the-architecture-twitter-uses-to-deal-with-150m-active ...
- Jquery插件实现点击获取验证码后60秒内禁止重新获取
通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...
- 借助 Java 9 Jigsaw,如何在 60 秒内创建 JavaFX HelloWorld 程序?
[编者按]本文作者为 Carl Dea,主要介绍利用 Jigsaw 项目在大约一分钟内编写标准化的"Hello World"消息代码.本文系国内 ITOM 管理平台 OneAPM ...
- iOS防止button重复点击
项目中常会遇到在按钮的点击事件中去执行一些耗时操作.如果处理不当经常会出现连续多次点击push多次的情况,造成不好的用户体验. 一种情况是用户快速连续点击,这种情况无法避免.另一种情况是点击一次后响应 ...
随机推荐
- mysql查看锁查看
关键词:mysql锁争用,mysql锁查看 --------------------- 作者:边城cn 来源:CSDN 原文:https://blog.csdn.net/miyatang/articl ...
- numpy-数据格式之 int 与 uint
概念 整型分为 有符号整型 和 无符号整型,其区别在于 无符号整型 可以存放的正数范围 比 有符号整型 大一倍,因为 有符号整型 将最高位存储符号,而 无符号整型 全部存储数字 # 1 111000 ...
- 企业面试题|最常问的MySQL面试题集合(三)
分区表的原理 分库分表的原理 延伸: MySQL的复制原理及负载均衡 分区表的工作原理 对用户而言,分区表是一个独立的逻辑表,但是底层MySQL将其分成了多个物理子表,这对用户来说是透明的,每一个分区 ...
- js 学习二 字符串常用方法
1.字符串长度 string.length var browserType = 'mozilla'; browserType.length; //7 2在字符串中查找子字符串 string.index ...
- openlayers 添加标记点击弹窗 定位图标闪烁
环境vue3.0 ,地图为公用组件,将添加图标标记的方法放在公共地图的初始化方法里 同一时间弹窗和定位标识都只有一个,因而我把弹窗和定位标记的dom预先写好放到了页面 //矢量标注样式设置函数,设置i ...
- 2019.9.17更换ubuntu的镜像源 ubuntu安装lamp iis安装网站和ftp站
更换ubuntu的镜像源 /etc/apt/sources.list cp /etc/apt/sources.list /etc/apt/sources.list.bak 备份这个文件 vim / ...
- linux上安装Eclipse
之所以要在linux上安装Eclipse,是因为一开始我是通过Eclipse+MingW+Samba+GDBserver方式在Windows上远程操作,准备编译调试nginx源代码的,可是在编译调试过 ...
- Java学习02-web.xml配置详解
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...
- MySQL 表的增删查改
一.插入数据 1. INSERT ... VALUES ... INSERT INTO <表名> [ <列名1> [ , … <列名n>] ] VALUES (值1 ...
- Vue原理解析——自己写个Vue
Vue由于其高效的性能和灵活入门简单.轻量的特点下变得火热.在当今前端越来越普遍的使用,今天来剖析一下Vue的深入响应式原理. tips:转自我的博客唐益达博客,此为原创.转载请注明出处,原文链接 一 ...