重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要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);}}});}