jQuery 防止相同的事件快速重复触发方法


Posted in jQuery onFebruary 08, 2018

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

以上这篇jQuery 防止相同的事件快速重复触发方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
jQuery Dom元素操作技巧
Feb 04 #jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 #jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
老生常谈js数据类型
2017/08/03 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Python中文件操作简明介绍
2015/04/13 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python2与Python3的区别点整理
2019/12/12 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python Selenium库的基本使用教程
2021/01/04 Python
Python实现简单的2048小游戏
2021/03/01 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
业务主管岗位职责范本
2013/12/25 职场文书
报到证丢失证明
2014/01/11 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
施工员岗位职责
2014/03/16 职场文书
我爱我校演讲稿
2014/05/21 职场文书
2014年财务科工作总结
2014/11/11 职场文书
通报表扬范文
2015/01/17 职场文书
初中毕业生感言
2015/07/31 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
利用python进行数据加载
2021/06/20 Python