jQuery 防止相同的事件快速重复触发方法
作者:潜伏的猎豹 发布时间:2024-04-09 19:48:05
标签:jQuery,防止,相同,事件,重复,触发
重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要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
0
投稿
猜你喜欢
- 字符串(sting)是 Python 中最常用的数据类型。我们可以使用引号('或")来创建字符。
- 多线程类似于同时执行多个不同程序,多线程运行有如下优点:使用线程可以把占据长时间的程序中的任务放到后台去处理。用户界面可以更加吸引人,比如用
- 这篇文章主要介绍了python集合删除多种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 使用int()转换int()类可将数字或字符串转换为整型,调用方法为:int(x, base=10)任意字符数字转换为10进制:>&g
- sqrt()方法返回x的平方根(x>0)。语法以下是sqrt()方法的语法:import mathmath.sqrt( x
- 1.打开文件:f=open(r'E:\PythonProjects\test7\a.txt',mode='rt
- python安装reportlabpip install reportlab -i http://pypi.douban.com/simpl
- 生成6位随机验证码的3种实现方式如下:1. 简单粗暴型:所有数字和字母都放入字符串;2. 利用ascii编码的规律,遍历获取字符串和数字的字
- 目录1.1 题目1.2 思路1.2.1 发送请求1.2.2 解析网页1.2.3 获取结点1.2.4 数据保存 (单线程)1.2.4 数据保存
- 1、创建表1.1、创建表基本语法CREATE TABLE tablename (column_name_1 column_type_1 co
- 我就废话不多说了,大家还是直接看代码吧~import kerasimport numpy as npimport matplotlib.py
- 本文主要介绍了详解python实现可视化的MD5、sha256哈希加密小工具,分享给大家,具体如下:效果图:刚启动的状态输入文本、触发加密按
- 标准的SQL模式匹配SQL的模式匹配允许你使用“_”匹配任何单个字符,而“%”匹配任意数目字符(包括零个字符)。在 MySQL中,SQL的模
- 一个小需求---实现车牌识别。目前有两个想法1. 调云在线的接口或者使用SDK做开发(配置环境和编译第三方库很麻烦,当然使用python可以
- 下表列出了所有Python语言支持的算术运算符。假设变量a持有10和变量b持有20,则: 例子:试试下面的例子就明白了所有的Pyt
- Python爬取网页信息的步骤以爬取英文名字网站(https://nameberry.com/)中每个名字的评论内容,包括英文名,用户名,评
- 上几章节我们主要学习了如何读取文章,而主要任务是读取文档中的文本信息,也就是字符串,而图片本身是不可读的文件所以并没有去读取图片。从今天开始
- 简介:这里是利用了selenium+图片识别验证,来实现12306的模拟登录,中间也参考了好几个项目,实现了这个小demo,中间也遇到了很多
- 之前有文章,使用Android平台的OpenCV接入了视频,控制的目标是手机的摄像头,这是OpenCV的好处,使用OpenCV可以使用跨平台
- 今天我去隽辰的博客去看他的文章,在读完他的文章之后,我很自然的就去读网友们给他留的评论,在读的时候我发现他的评论是顺序的,也就是最早的评论在