jQuery 防止相同的事件快速重复触发方法
更新时间：2018年02月08日 10:04:29 作者：潜伏的猎豹
下面小编就为大家分享一篇jQuery 防止相同的事件快速重复触发方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
重复触发就是防止用户重复点击提交数据了，我们一般都是点击之后没反应会再次点击了，这个不但要从用户体验上来做好，还在要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+jsp实现省市县三级联动效果,以完整实例形式分析了jQuery结合jsp读取MySQL数据库操作实现省市县三级联动效果的相关技巧,并附带完整实例源码供读者下载参考,需要的朋友可以参考下2015-12-12
最近对js以及jq产生了浓厚的兴趣，看到jq有很多很好用的插件，功能各异，包括webUI,jqGrid等等。心里萌发了制作属于自己的jq插件的想法。2010-02-02
这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果，利用Jquery制作焦点图左右轮播特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了jquery中$.ajax方法提交表单的方法及介绍，希望对大家有所帮助2014-11-11
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
这篇文章主要介绍了jQuery购物车插件jsorder用法,结合实例形式分析了购物车jsorder插件基于ajax与后台交互的相关技巧,需要的朋友可以参考下2016-06-06
这篇文章给大家分享了一个jQuery边框动态的效果，当鼠标移动到边框区域的时候，边框会有个动态的加载动画效果，实现的效果真的非常不错，下面来一起看看吧。2016-09-09
大家应该都会有这样一种感觉，data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此。下面就来详细深入的学习下jQuery中的data()，感兴趣的朋友们可以参考借鉴。2016-12-12
最近发现一个不错的基于jquery的插件thickBox ，感觉比facebox好用。但因为jquery官方不推荐使用。所以这个只是学习的朋友，不建议使用这个。2010-09-09
这篇文章主要介绍了将jquery.qqFace.js表情转换成微信的字符码的方法，以及jquery.qqface.js的使用方法，需要的朋友可以参考下2017-12-12
这篇文章主要介绍了封装的jquery翻页滚动。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
最新评论