防止重复触发事件

应用场景

重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要js或php程序脚本上做好,让用户知道点击是己提交服务器正在处理,下面我就整理从脚本上来处理此重复触发的问题。
很多时候事件会被快速重复触发,比如 click,这样就会执行两次代码,造成很多后果。现在有比较多的解决方法,但几乎都有局限性,比如一个 Ajax 表单,如果防止用户一次点好多下可以在第一次点击的时候冻结提交按钮,直到允许再次点击的时候再放开。很多人都这样干,但在其他的情况就不是很有效了。

方法

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);
});

扩展知识:函数节流 + 函数防抖

亲,赏一个呗,一分也是爱!
0%