重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要js或java程序脚本上做好,让用户知道点击是己提交服务器正在处理,下面我就整理从脚本上来处理此重复触发的问题。
很多时候事件会被快速重复触发,比如 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 毫秒再响应事件。
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);
}
function submitfrm(){
delay_till_last('id', function() {//注意 id 是唯一的
//响应事件
submitform();
}, 300);
}
function submitform(){
$('#editfm').form('submit',{
method:'post',
url:'<%=path%>/BaseCostFieldController/insertBaseCostField.do',
success: function(val){
var data = eval('('+val+')');
$('#editdg').dialog('close');
if(data.result){
$.messager.alert('消息',data.message);
$('#dg').datagrid('reload');
}else{
$.messager.alert('警告',data.message);
}
}
});
}