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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现电梯导航模块
Dec 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
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
小程序实现录音功能
2020/09/22 Javascript
Python常用列表数据结构小结
2014/08/06 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
心理咨询专业自荐信
2014/07/07 职场文书
2014年实习生工作总结
2014/11/27 职场文书
技术负责人岗位职责
2015/02/10 职场文书
安全生产会议制度
2015/08/06 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
创业计划书之家政服务
2019/09/18 职场文书
python状态机transitions库详解
2021/06/02 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技