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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 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实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php实现微信模板消息推送
2018/03/30 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python的另外几种语言实现
2015/01/29 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
关于Django Models CharField 参数说明
2020/03/31 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
好矿嫂事迹材料
2014/01/21 职场文书
公务员考察材料范文
2014/12/23 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
入党自荐书范文
2015/03/05 职场文书
mysql优化
2021/04/06 MySQL
52条SQL语句教你性能优化
2021/05/25 MySQL
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
mysql的数据压缩性能对比详情
2021/11/07 MySQL