jQuery 防止相同的事件快速重复触发方法


Posted in jQuery onFebruary 08, 2018

重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要js或php程序脚本上做好,让用户知道点击是己提交服务器正在处理,下面我就整理从脚本上来处理此重复触发的问题。

很多时候事件会被快速重复触发,比如 click,这样就会执行两次代码,造成很多后果。现在有比较多的解决方法,但几乎都有局限性,比如一个 Ajax 表单,如果防止用户一次点好多下可以在第一次点击的时候冻结提交按钮,直到允许再次点击的时候再放开。很多人都这样干,但在其他的情况就不是很有效了。

下面推荐一个不错的方法,首先丢一个函数进去。

var _timer = {}; 
function delay_till_last(id, fn, wait) { 
 if (_timer[id]) { 
  window.clearTimeout(_timer[id]); 
  delete _timer[id]; 
 } 
 
 return _timer[id] = window.setTimeout(function() { 
  fn(); 
  delete _timer[id]; 
 }, wait); 
}

使用方法

$dom.on('click', function() { 
 delay_till_last('id', function() {//注意 id 是唯一的 
  //响应事件 
 }, 300); 
});

上面的代码可以让点击之后等待 300 毫秒,如果在 300 毫秒内又发生了这个事件则废除上一次点击,重新计时,反复如此,直到完全等待了 300 毫秒再响应事件。

这个函数很有用的,比如验证输入或者根据输入的邮箱实时拉去头像而不用等到必须失焦再拉取。

例子

按钮BUTTON类

a标签类

对于第一类情况,button有一个属性是disabled控制其是否可以点击,看代码

<input type="button" value="Click" id="subBtn"/> 
<script type="text/javascript"> 
function myFunc(){ 
 //code 
 //执行某段代码后可选择移除disabled属性,让button可以再次被点击 
 $("#subBtn").removeAttr("disabled"); 
} 
$("#subBtn").click(function(){ 
 //让button无法再次点击 
 $(this).attr("disabled","disabled"); 
 //执行其它代码,比如提交事件等 
 myFunc(); 
}); 
</script>

以上这篇jQuery 防止相同的事件快速重复触发方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
jQuery Dom元素操作技巧
Feb 04 #jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 #jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python中包的用法及安装
2020/02/11 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
大四学生思想汇报
2014/01/13 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
班级标语大全
2014/06/21 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2014年销售工作总结
2014/12/01 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技