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. QTP11完美破解小笔记

    相比Loadrunner的破解,QTP的应该会更简单,但是效果并没有Loadrunner的长久.QTP的破解只能维持30天,每30天需要再进行如下操作: 1.到C:\ProgramData目录下面去删 ...

  2. Struts2学习第一天——struts2基本流程与配置

    struts2框架 什么是框架,框架有什么用? 框架 是 实现部分功能的代码 (半成品),使用框架简化企业级软件开发 ,提高开发效率. 学习框架 ,清楚的知道框架能做什么? 还有哪些工作需要自己编码实 ...

  3. PDO数据访问抽象层

    PDO数据访问抽象层: 我们使用的mysqli是针对mysql这个数据库扩展的一个类,如果要用到别的数据库的话就可以用PDO来做 1.操作数据库 先来代码 <!--PDO--> <! ...

  4. 如何快速的学习selenium工具

    分享即快乐. 最近几年,软件测试工程师一度成为热门职业,作为测试员也是倍感压力.作为测试员来说,仅仅会手工测试让职业生涯陷入瓶颈.于是工作之余充电,学习了自动化测试工具selenium,打算进阶中高级 ...

  5. Django之Session

    Django  -- Seeion介绍 问:       Django的session是什么? 答:       Django 完全支持匿名 Session的. Session 框架允许每一个用户保存 ...

  6. wap问答系统工作总结

    一直想找个锻炼自己的机会,但是又很恐慌,怕自己能力太差,把握不住机会,把事情弄糟. 终于,要做wap问答系统了,本来说是几个人一块儿做,我分析了下页面,发现共同的部分还是比较多的,有点想法,要不我接过 ...

  7. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  8. json串拼接模版

    var jsonarr = new Array;; jsonstr = '{' + '"objuid":' + '"' + abp.common.json2string( ...

  9. kali linux 折腾笔记

    http://xiao106347.blog.163.com/blog/static/215992078201342410347137/ 这里告诉你刚刚装好kali后要做,有些也是不正确的,可能开始你 ...

  10. mybatis只能模糊查询英文不能查询中文

    解决方法:修改配置文件,最简单的完美修改方法,修改mysql的my.cnf文件中的字符集键值(注意配置的字段细节): 1.在[client]字段里加入default-character-set=utf ...