ajax多次请求，只执行最后一次的方法

有时候点击按钮进行异步请求数据的时候可能网络差，用户会点击很多次，或者页面有很多相同的按钮，参数不同，但是调用的ajax相同，只想得到最后一次结果

我的思路是用闭包记录执行次数，并同时记录发起ajax的次数，等数据返回的时候比较两次次数的结果，渲染最后一次数据

多说无益，上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="renderer" content="webkit">

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <title>Title</title>

</head>

<body>

<button id="ajaxbtn">获取数据</button>

点击次数<span id="num"></span>

<div id="show">

</div>

<script>

    //定义点击次数和方法执行次数

    var a = 1;

    var flag = 1;

    $('#ajaxbtn').click(function () {

        a = a + 1

        $('#num').html(a)

        console.log(a);

        btnAjax('https://api.douban.com/v2/movie/in_theaters', cb);

    })

//封装ajax事件

    function btnAjax(url, cb) {

        $.ajax({

            type: 'get',

            url: url,

            dataType: 'jsonp',

            success: function (data) {

                var func = callbackFunc(data, cb);

                func()

            }

        })

    }

    //返回函数

    function cb(data) {

        console.log(a);

        console.log(data);

        var str = '';

        for (var i = 0; i < data.subjects.length; i++) {

            str += '<img src="' + data.subjects[i].images.small + '">';

        }

        $('#show').html(str)

    }

    //判断次数，获取返回函数

    function callbackFunc(data, cb) {

        flag++;

        if (a == flag) {

            return function () {

                cb(data);

            }

        } else {

            return function () {

            }

        }

    }

</script>

</body>

</html>

ajax多次请求，只执行最后一次的方法的更多相关文章

  1. 利用闭包实现多次ajax请求只执行最后一次

    点一个按钮,则向服务器请求资源,不作处理时,多次点击后会有很多个请求在等待.我们知道一般我们用ajax是异步请求,那么我们快速重复点击一个按钮得到的结果其实我们并不知道是哪次点击的结果可能是第一次可能 ...

  2. ajax 载入html后不能执行其中的js解决方法

    事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁 ...

  3. Ajax中Delete请求参数 后台无法获取的解决方法（Restful风格）

    方法一: 在ajax中写入data来传参时,直接把参数拼接到url后面 例如: $.ajax({ url: '/cyberspace/vrv/event/delete/1002?startTime=& ...

  4. js闭包for循环总是只执行最后一个值得解决方法

    <style> li{ list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;curso ...

  5. 解决ajax跨域请求 （总结）

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  6. legend2---开发日志10（ajax请求的方法是否同样会执行base控制器里面的方法）

    legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法) 一.总结 一句话总结:会执行的,所以写base控制器里面的方法要注意,base控制器里面的方法要以查数据为 ...

  7. 详解Ajax请求（四）——多个异步请求的执行顺序

    首先提出一个问题:点击页面上一个按钮发送两个ajax请求,其中一个请求会不会等待另一个请求执行完毕之后再执行? 答案是:不会,这两个异步请求会同时发送,至于执行的快与慢,要看响应的数据量的大小及后台逻 ...

  8. ajax请求完成执行的操作

    var createAjax = $("#createId").ajax(function(){ //ajax操作 }); $.when(createAjax).done(func ...

  9. layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法

    ayui使用官方的表单模块form.on('submit(sub)',function (){}) 提交,使用ajax请求向后台请求一个执行结果,根据结果进行处理,出现回调无法执行,并且页面出现了刷新 ...

随机推荐

  1. C# .NET更智能的数据库操作封装项目

    前面两篇文章介绍了框架的思路及里面大概的实现过程,那时候忘记上传项目,就补发一下.顺便介绍下框架使用方式,并分析下框架使用的优缺点. 先发一下前两章的链接 篇一:http://www.cnblogs. ...

  2. Cocos2d-x shader学习3： sprite描边(Outline)

    Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果.所以本篇文章只针对于sprite来实现描边效果 ...

  3. 快速排序 partition函数的所有版本比较

    partition函数是快排的核心部分 它的目的就是将数组划分为<=pivot和>pivot两部分,或者是<pivot和>=pivot 其实现方法大体有两种,单向扫描版本和双向 ...

  4. 九度OJ题目1208：10进制 VS 2进制 (JAVA)

    题目描述: 对于一个十进制数A,将A转换为二进制数,然后按位逆序排列,再转换为十进制数B,我们乘B为A的二进制逆序数.     例如对于十进制数173,它的二进制形式为10101101,逆序排列得到1 ...

  5. java利用“映射文件访问”（MapperByteBuffer）处理文件与单纯利用Buffer来处理文件的快慢比较

    处理文件是java经常使用的操作,在对一个“大文件”(比如超过64M)进行操作时一点点速度的提高都会带来性能的巨大提升.然而我们经常使用的BufferxxStream,来直接处理大文件时,往往力不从心 ...

  6. 爬取软考试题系列之ip自动代理

    马上5月份有个软件专业等级考试,以下简称软考,为了更好的复习备考,我打算抓取www.rkpass.com网上的软考试题. 以上为背景. 很久没有更新博客园的博客了,所以之前的代码没有及时的贴出来,咱们 ...

  7. Apache无法启动原因

    Apache不能启动解决办法 作者的话:遇到这个问题的时候,从网上找了很多资料,结果都是让我这个新手摸不着头绪 还好,在我长时间的查找下,还是找到了一篇文章,解决了我的烦恼,下面是我对这个文章的一些对 ...

  8. 关于label和span设置width无效问题解决方法

    转:http://www.jb51.net/web/113507.html 大家可能不知道默认情况下label.span 设置width 是无效的,只有当display:block时,我们所设置的wi ...

  9. SQL注入相关的知识【Mysql为例子】

    以DVWA的sql注入初级为例,结合网上搜索的相关利用方式,总结成这一篇文章,内容会有点跳跃. 大纲: 1.初级手工注入 2.order by的使用 3.union查询注意点 4.Mysql相关的注释 ...

  10. (15)IO流之File

    File类用封装了一个文件夹或者文件的所有属性. File类的构造方法: File(String pathname) 指定文件或者文件夹的路径创建一个File文件 File(File parent, ...