jQuery 防止相同的事件快速重复触发方法
作者:潜伏的猎豹 时间:2024-04-09 19:48:05
重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要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>
来源:http://blog.csdn.net/flower_vip/article/details/58129032
标签:jQuery,防止,相同,事件,重复,触发
0
投稿
猜你喜欢
vue如何搭建多页面多系统应用
2024-05-02 17:03:47
PyTorch中的Variable变量详解
2023-02-19 18:48:47
sqlserver 修改列名及表名的sql语句
2012-07-11 15:58:46
查看Python依赖包及其版本号信息的方法
2021-10-13 23:52:59
Python使用遗传算法解决最大流问题
2023-02-19 10:49:57
python实现简单的学生成绩管理系统
2023-04-03 01:08:25
对Python 文件夹遍历和文件查找的实例讲解
2021-11-05 22:29:25
javascript this 关键字小提示
2009-02-03 13:22:00
oracle数据库tns配置方法详解
2023-07-20 16:14:10
php SQL防注入代码集合
2023-11-18 03:58:34
python-opencv获取二值图像轮廓及中心点坐标的代码
2021-03-10 01:12:02
Python实现对照片中的人脸进行颜值预测
2023-04-05 18:21:12
Javascript正则表达式基础
2009-02-01 18:13:00
Python+PyQT5的子线程更新UI界面的实例
2022-06-09 10:39:02
MySQL模糊查找like通配符使用(小白入门篇)
2024-01-17 19:02:53
c#将Excel数据导入到数据库的实现代码
2024-01-25 21:53:43
浅谈如何使用Python控制手机(一)
2023-03-11 14:18:47
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2023-05-15 02:03:20
巧用SQL链接服务器访问远程Access数据库
2008-11-28 16:32:00
python实现网上购物系统
2021-06-12 16:32:26