记录日常点点滴滴,欢迎来到我的小站。

0%

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

方法一

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

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

1
2
3
4
5
6
7
8
9
10
11
12
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);
}

使用方法:

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

上面的代码可以让点击之后等待 300 毫秒,如果在 300 毫秒内又发生了这个事件则废除上一次点击,重新计时,反复如此,直到完全等待了 300 毫秒再响应事件。
这个函数很有用的,比如验证输入或者根据输入的邮箱实时拉去头像而不用等到必须失焦再拉取。
例子
按钮BUTTON类
a标签类
对于第一类情况,button有一个属性是disabled控制其是否可以点击,看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

方法二,可以使用

1
2
3
if(!选择器.is(":animated")){
选择器.stop(true, false).animate
}

来防止重复相同事件导致,错位,计算不准等问题。