限制 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多次的情况,造成不好的用户体验. 一种情况是用户快速连续点击,这种情况无法避免.另一种情况是点击一次后响应 ...
随机推荐
- leveldb Arena
背景我们都知道,对于一个高性能的服务器端程序来说,内存的使用非常重要.C++提供了new/delete来管理内存的申请和释放,但是对于小对象来说,直接使用new/delete代价比较大,要付出额外的空 ...
- Solr 4.4.0安装
软件包准备 JDK http://download.oracle.com/otn/java/jdk/6u45-b06/jdk-6u45-linux-x64.bin Solr https://archi ...
- java hashmap&concurrentHashmap源理
Java集合:HashMap底层实现和原理(源码解析) https://www.cnblogs.com/java-jun-world2099/p/9258605.html HashMap源码解析JDK ...
- KNN-机器学习算法
''' Created on Sep 16, 2010 kNN: k Nearest Neighbors Input: inX: vector to compare to existing datas ...
- vue学习【番外篇】vue-cli脚手架的安装
大家好,我是一叶,今天和大家分享的是vue-cli脚手架的安装,关于vue-cli的优点,我就不赘述了. 一.检查安装node 安装vue-cli之前,先检查node是否安装.win+R,输入cmd打 ...
- $id(id)函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于strcpy的安全函数的选择
1)如果整个程序,在进行字符拷贝时,这个拷贝字符串的完整性,不影响整个程 序的运行,可以让其截取一部分字符串,程序继续执行.那么我们就可以选择安全 函数:strncpy_s 2)如果在进行字符串拷贝时 ...
- Linux常用命令及Shell的简单介绍
一.linux命令 1.查看指令的参数搭配: man 指令名称 2.基础指令 ls 列出当前目录下的所有文档的名称(文档指的是文件和文件夹) 常用参数搭配: ls -l 列出文档详细信息 l ...
- shared_ptr的原理与应用
new与赋值的坑 赋值(assignment)和new运算符在C++与Java(或C#)中的行为有本质的区别.在Java中,new是对象的构造,而赋值运算是引用的传递:而在C++中,赋值运算符意味着& ...
- 安装Python包报错——ReadTimeoutError
一.问题:安装python包的时候报错ReadTimeoutError——Read time out. 二.解决办法三种方法,一是切换下载源:二是下载相应平台的安装包后安装:三是下载源码编译安装: ...