限制 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多次的情况,造成不好的用户体验. 一种情况是用户快速连续点击,这种情况无法避免.另一种情况是点击一次后响应 ...
随机推荐
- jira:恢复数据:AO_187CCC_SIDEBAR_LINK
JIRA 恢复数据时报错 ,关键词是找不到 AO_187CCC_SIDEBAR_LINK. 经网上查为 mysql connect jar 包 的版本过高所致. 降低版本后,成功导入数据.
- iOS模拟器发生了崩溃,去哪找Crash Log
iOS模拟器发生了崩溃,可以在如下地方找到崩溃日志: ~/Library/Logs/DiagnosticReports/
- python之入门
第一章 入门 1.1 变量-输出 a = 1 # 声明变量 a # 变量的名字 = # 赋值 1 # 值 变量定义的规则: 1.变量由数字,字母,下划线组成 2.不能以数字开头 3.不能使用pytho ...
- Paxos协议理解
第三次报告: 理解Paxos协议 一. Paxos协议背景 什么是Paxos协议? 一般地,从客户端和服务器的角度,任何一个分布式系统都可以理解成由一个服务器集合和一个客户端集合组成,一个或多个客户端 ...
- 不用再去找rem了,你想要的rem都在这
一.兼容性. 目前,IE9+,Firefox.Chrome.Safari.Opera 的主流版本都支持了rem(大胆用吧,目前几乎所有手机浏览器都支持rem) 二.什么是rem. rem是相对于根元素 ...
- wex5 如何导包
wex5中 导jar包 要先把jar文件放在: E:\WeX5\runtime\BaasServer\WEB-INF\lib目录中(我wex5放的是E盘) 点击项目 --> 属性 --> ...
- wex5 如何在js中给data添加数据
var options = { defaultValues :[ {'xuetang' : xuetang,'time' : time} ] }; this.comp("xuetangDat ...
- 一、JS基本基础
一.主流编辑器 早期 atom 前几年sublime 小巧,轻量,功能插件较多: webstorm 集成开发环境 vscode 免费开源的. 运行环境 : 浏览器端 谷歌,IE,fi ...
- 高效开发之使用Cmder替换cmd
一.为什么要更换为cmder 在做项目时,有些时候我想复制控制台上面的代码时,cmd有的时候复制粘贴很麻烦,Cmder则不会,并且Cmder可以分屏多开窗口,可以设置窗口颜色,字体大小,并且很多快捷键 ...
- Restful 架构方式的 web service
现在公司项目用的apache wink 搭建的web service ,感觉挺好用的.顺便学习一个这种架构方式 . 个人理解apache 实现Restful 架构方式技术有两种,如果有其他新的知识或不 ...