文档章节

jquery ajax避免重复触发同一个事件

mosaic101
 mosaic101
发布于 2015/12/09 14:54
字数 460
阅读 165
收藏 4

拿个我最近在做的功能举例:

    关注他人的功能:有一个关注按钮,实现关注与取消关注功能。(数据库是mysql)

    由于是ajax操作,有个回调方法,在返回success之前或者浏览器卡顿之间会出现重复触发同一个事件。


方法1:

    最笨的方法就是在关联表中插入数据前先查询 ,然后判断有没有两人的关联数据。若没有则插入,若有则不插入。此方法,当表单数据量多的时候,操作不仅慢,还会给服务器带来一定压力。

方法2:

    setTimeout + clearTimeout

连续的点击会把上一次点击清除掉,也就是ajax请求会在最后一次点击后发出去

方法3:

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>

方法4:

    给ajax请求一个"开关",效果等同于方法3。代码如下:

var flag = false //定义一个开关,默认是关

$("#subBtn").click(function(){
    if(!flag){
        flag = true; //打开开关
        //若开关处于开的状态,执行其它代码,比如提交事件等
        flag = false; //执行完代码,需要在回调函数的最后将开关关闭 
    }
});


    以上方法2,3比较常用。看到知乎上的大神说,可以自己写封装的ajax,内嵌一些机制,暂时还未理解,等理解了再完善一下。

© 著作权归作者所有

共有 人打赏支持
mosaic101
粉丝 21
博文 31
码字总数 12966
作品 0
浦东
程序员
jquery的一些用法 有用的用法。

AJAX 框架 用Asp.net ajax 还是 Jquery? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NETAJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery,众多的 $g...

雪中漫步
2010/03/29
0
0
jQuery中的Ajax----03

$.ajax(0方式是jQuery最底层的Ajax实现。 它的结构为: $.ajax(options) 该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息。参数以key/value的形式存...

指尖跳动的精灵
2015/03/09
0
2
jQuery Ajax 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是...

李长春
2011/12/29
0
0
Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi
06/22
0
0
jquery load方法 导致页面和js加载了两次

出现这种问题一个很可能的原因就是:事件绑定的代码被执行了两次! 请先仔细检查代码 $(".items img").click(function(){...}); 确保只绑定了一次,没有重复绑定。 如果找不出原因(比如某些...

sjzmlb
2015/06/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据框架对比:Hadoop、Storm、Samza、Spark和Flink

简介 大数据是收集、整理、处理大容量数据集,并从中获得见解所需的非传统战略和技术的总称。虽然处理数据所需的计算能力或存储容量早已超过一台计算机的上限,但这种计算类型的普遍性、规模...

hblt-j
25分钟前
2
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 9.1 正则介绍_grep上 什么是正则 ...

zgxlinux
40分钟前
2
0
想用Unity3D引擎软件赚点钱的看过来

前言: 你可以不拥有很多钱 但你一定要有赚钱的能力 目前手上有项目, 需要熟练Unity3D引擎软件的伙伴 有意向的给我发私信

猿神出窍
42分钟前
2
0
Spring Boot全局异常处理

Spring Boot默认的异常处理机制 默认情况下,Spring Boot为两种情况提供了不同的响应方式。 一种是浏览器客户端请求一个不存在的页面或服务端处理发生异常时,一般情况下浏览器默认发送的请求...

狼王黄师傅
今天
8
0
Thinkphp5 优雅配置两个数据库

工作需要需要配置两个数据库,框架5.0的,步骤如下: 1、在database.php同级创建一个database2.php文件 在里面配置第二个数据库信息, 2、在config中配置这个数据库信息: 3、创建第二个表的...

wqzbxh
今天
5
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部