最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,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篇)的更多相关文章

  1. 关于javascript中限定时间内防止按钮重复点击的思路

    前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...

  2. Andorid-解决View重复点击的思路

    Andorid-解决View重复点击的思路 转 https://www.jianshu.com/p/10d400a296fe 最近遇到一道面试题,题目是在App开发中,如何防止多次点击支付或者多次点击 ...

  3. 关于Android避免按钮重复点击事件

    最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...

  4. React Native(十一)——按钮重复点击事件的处理

    最初开始做后台管理系统的时候,就曾遇到过这样一种场景:"快速点击确认按钮,就会对此触发确认事件,导致多次请求数据库":于是最终我们得当的通过处理那个确认button,解决了上述问题 ...

  5. 转载:Github项目解析(七)-->防止按钮重复点击

    不错的东西,记录下... http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qq_23547831/article/deta ...

  6. 按钮重复点击问题 UIbutton

    .h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...

  7. 谈谈防止Ajax重复点击提交

    首先说说防止重复点击提交是什么意思. 我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转.这样,可以一定程度上防止用户 ...

  8. iOS之防止用户重复点击Button(按钮)问题

    在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...

  9. asp.net中如何防止用户重复点击提交按钮

    asp.net中如何防止用户重复点击提交按钮   asp.net 中防止因为网速慢等影响交互的问题导致用户可能点击多次提交按钮,从而导致数据库中出现多条重复的记录,经过亲自验证在网上找的方法,找到两个 ...

随机推荐

  1. vue基础学习一

    写一个例子,告诉你VUE的方便之处,就是双向绑定,不需要操作DOM对象,而是操作数据 div中msg 和JS中msg是一一对应的 然后看浏览器中 然后如果我想改变浏览器中值,我在console这么操作 ...

  2. [fw]LINUX中断描述符初始化

    LINUX中断描述符初始化 @CopyLeft by ICANTH,I Can do ANy THing that I CAN THink!~ Author: WenHui, WuHan Univer ...

  3. Groovy学习:第五章 学习回顾groovy

    一.groovy是什么 简单地说,Groovy 是下一代的java语言,跟java一样,它也运行在 JVM 中. 作为跑在JVM中的另一种语言,groovy语法与 Java 语言的语法很相似.同时,G ...

  4. SpringMVC学习(12):基于Hibernate+Spring+Spring MVC+Bootstrap的管理系统实现

    到这里已经写到第12篇了,前11篇基本上把Spring MVC主要的内容都讲了,现在就直接上一个项目吧,希望能对有需要的朋友有一些帮助. 一.首先看一下项目结构: InfrastructureProj ...

  5. hibernate 参数一览

    实现包含了Hibernate与数据库的基本连接信息的配置方式有两种方式: 第一种是使用hibernate.properties文件作为配置文件. 第二种是使用hibernate.cfg.xml文件作为 ...

  6. OkHttp的使用

    Download OkHttp3 implementation 'com.squareup.okhttp3:okhttp:3.10.0' 1.1. 异步GET请求 -new OkHttpClient; ...

  7. Docker基础(上)

    Docker基础(上) 链接:https://pan.baidu.com/s/1KQjKml2OZAReYwOvpWD9XQ 提取码:6vo8 复制这段内容后打开百度网盘手机App,操作更方便哦 1. ...

  8. 三、Redis的配置文件和多数据库用途

    1.使用文件 # 使用配置文件启动 redis-server ./redis.conf # 带配置文件启动 且指定某几个配置 配置名称前加 -- redis-server ./redis.conf - ...

  9. jquery 选项卡切换 带背景图片

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  10. 异常:Error response from daemon: conflict: unable to delete 6fa48e047721 (cannot be forced) - image has dependent child images

    在删除镜像之前要先用 docker rm 删掉依赖于这个镜像的所有容器(哪怕是已经停止的容器),否则无法删除该镜像. 停止容器 # docker stop $(docker ps -a | grep ...