防止按钮重复点击的思路(js篇)
最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数
<button id="btn"></button>
<script>
btn.onclick = function add(){
btn.innerHTML = Number(btn.innerHTML) + ;
btn.onclick = null;
clearTimeout(timer);
var timer = setTimeout(function(){
btn.onclick = add;
},);
}
</script>
另一个思路是获取并记录时间,当再次点击时,时间间隔大于1s时才有效
<button id="btn">0</button>
<script>
btn.onclick = (function(){
var last = Date.now();
return function(){
var now = Date.now();
if((now - last)>1000){
btn.innerHTML= Number(btn.innerHTML) + 1;
}
last = now;
}
})();
</script>
防止按钮重复点击的思路(js篇)的更多相关文章
- 关于javascript中限定时间内防止按钮重复点击的思路
前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...
- Andorid-解决View重复点击的思路
Andorid-解决View重复点击的思路 转 https://www.jianshu.com/p/10d400a296fe 最近遇到一道面试题,题目是在App开发中,如何防止多次点击支付或者多次点击 ...
- 关于Android避免按钮重复点击事件
最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...
- React Native(十一)——按钮重复点击事件的处理
最初开始做后台管理系统的时候,就曾遇到过这样一种场景:"快速点击确认按钮,就会对此触发确认事件,导致多次请求数据库":于是最终我们得当的通过处理那个确认button,解决了上述问题 ...
- 转载:Github项目解析(七)-->防止按钮重复点击
不错的东西,记录下... http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qq_23547831/article/deta ...
- 按钮重复点击问题 UIbutton
.h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...
- 谈谈防止Ajax重复点击提交
首先说说防止重复点击提交是什么意思. 我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转.这样,可以一定程度上防止用户 ...
- iOS之防止用户重复点击Button(按钮)问题
在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...
- asp.net中如何防止用户重复点击提交按钮
asp.net中如何防止用户重复点击提交按钮 asp.net 中防止因为网速慢等影响交互的问题导致用户可能点击多次提交按钮,从而导致数据库中出现多条重复的记录,经过亲自验证在网上找的方法,找到两个 ...
随机推荐
- HDU 4886 TIANKENG’s restaurant(Ⅱ) ( 暴力+hash )
TIANKENG’s restaurant(Ⅱ) Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 130107/65536 K (Ja ...
- java虚拟机规范(se8)——class文件格式(二)
4.4 常量池 java虚拟机指令并不依赖类.接口.类实例或者数组的运行时布局.相反,指令依靠常量池中的符号信息. 所有的常量池条目都有如下的通用结构: cp_info { u1 tag; u1 in ...
- Java接口自动化测试实战笔记
综述 代码管理工具Git 测试框架 TestNG 测试报告 Mock 接口框架 HTTP 协议接口 测试框架 HttpClient SprintBoot 自动化测试开发 数据持久层框架 MyBatis ...
- SpringMVC学习(2):经典的HelloWorld实现
前一篇简单介绍了Spring MVC的一些知识,下面就要开始学习如何把Spring MVC运用到具体的项目中去. 首先还是从一个简单的Hello World项目说起: 我机器的开发环境为: Ubunt ...
- 将一个对象赋值给另一个对象(使用element CheckBox中length报错)
注意两个对象相似(比如form表单),千万不要直接赋值(会把对象的属性也变化),很容易漏掉一些属性.比如此次CheckBox报length的错误,就是因为用于存放checkbox复选框选项的数组进过赋 ...
- face_recognition人脸识别框架
一.环境搭建 1.系统环境 Ubuntu 17.04 Python 2.7.14 pycharm 开发工具 2.开发环境,安装各种系统包 人脸检测基于dlib,dlib依赖Boost和cmake $ ...
- 五、bootstrap-fileinput
一.bootstrap-fileinput <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- shell input value from console
echo "Please enter some input: " read input_variable echo "You entered: $input_variab ...
- HDU-4126 Genghis Khan the Conqueror 树形DP+MST (好题)
题意:给出一个n个点m条边的无向边,q次询问每次询问把一条边权值增大后问新的MST是多少,输出Sum(MST)/q. 解法:一开始想的是破圈法,后来想了想应该不行,破圈法应该只能用于加边的情况而不是修 ...
- input file 上传文件类型控制
文件类型 accept *.3gpp audio/3gpp, video/3gpp.ac3 audio/ac3.asf allpication/vnd.ms-asf.au audio/basic.cs ...