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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery AJAX应用实例总结
May 19 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生成文件
2007/01/15 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
简单了解python模块概念
2018/01/11 Python
python版本单链表实现代码
2018/09/28 Python
python实现事件驱动
2018/11/21 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
反腐倡廉警示教育活动总结
2014/05/05 职场文书
市场营销工作计划书
2014/09/15 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
四年级语文教学反思
2016/03/03 职场文书
2019各种保证书范文
2019/06/24 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL