文档章节

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

mosaic101
 mosaic101
发布于 2015/12/09 14:54
字数 460
阅读 160
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高三暑假我是怎么想开去学linux系统的

高三的时候,我有一句口头禅:“老了老了,现在做题越来越迟钝了”。当时整天日夜苦读,体重日益增加,脸色越来越黯淡,我在终于熬过了高考的时候,简直心里面乐得开了花。我终于可以去做自己...

linuxprobe16
23分钟前
0
0
Python 获得命令行参数的方法

需要模块:sys 参数个数:len(sys.argv) 脚本名: sys.argv[0] 参数1: sys.argv[1] 参数2: sys.argv[2]

编程老陆
30分钟前
0
0
链队

队列用链表来表示时,需要用两个变量来记录队列两端的变化:theFront,theBack. 根据链接方向的不同,链队有两种链接方式(其实就是链表的头插入节点和尾插入节点,头删除节点和尾删除节点)。...

Frost729
33分钟前
0
0
IDEA toString() json模板

public java.lang.String toString() {java.lang.StringBuilder builder = new java.lang.StringBuilder();#set ($i = 0)#foreach ($member in $members)#if ($i == 0)builder.appen......

Mtok
43分钟前
0
0
Dubbo内核实现之SPI简单介绍

Dubbo采用微内核+插件体系,使得设计优雅,扩展性强。那所谓的微内核+插件体系是如何实现的呢!即我们定义了服务接口标准,让厂商去实现(如果不了解spi的请谷歌百度下), jdk通过ServiceLo...

明理萝
48分钟前
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部