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. 工具使用——MATLAB基本调试方法

    作者:桂. 时间:2017-02-28  07:06:30 链接:http://www.cnblogs.com/xingshansi/articles/6477185.html 声明:转载请注明出处, ...

  2. Linux 下查看CPU的使用情况

    1.top使用权限:所有使用者使用方式:top [-] [d delay] [q] [c] [S] [s] [i] [n] [b]说明:即时显示process的动态d :改变显示的更新速度,或是在交谈 ...

  3. 概念 : 过程 : 前台login

    为了解决自动登入.访问权限机制.登入权限而诞生了这过程,过程需要概念来维护记忆. 通过singlePageAutoLoginLocalStorage, UIStateLocalStorage, Use ...

  4. 寻找与疾病相关的SNP位点——R语言从SNPedia批量提取搜索数据

    是单核苷酸多态性,人的基因是相似的,有些位点上存在差异,这种某个位点的核苷酸差异就做单核苷酸多态性,它影响着生物的性状,影响着对某些疾病的易感性.SNPedia是一个SNP调査百科,它引用各种已经发布 ...

  5. 微信开源PHP商城系统一处blind xxe（无需登录，附POC）

    测试版本wemall 3.3 下载地址 http://git.oschina.net/einsqing/wemall/repository/archive?ref=master 需要开源中国的账号 c ...

  6. 微信企业号接收消息(使用SpringMVC)

    微信企业号接收消息(使用SpringMVC) 微信企业号接收消息(使用SpringMVC) 将应用设置在回调模式时,企业可以通过回调URL接收员工回复的消息,以及员工关注.点击菜单.上报地理位置等事件 ...

  7. Python第五章__模块介绍，常用内置模块

    Python第五章__模块介绍,常用内置模块 欢迎加入Linux_Python学习群  群号:478616847 目录: 模块与导入介绍 包的介绍 time &datetime模块 rando ...

  8. ps人物像发丝的抠图处理

    1-复制图层——使用快速选择工具——添加选区(包含发丝)——调整边缘 2- 提高半径(尽量高)——降低移动边缘——输出到新建图层 这个时候,我们发现人物的很多地方是透明的,不用担心,因为我们这一步先是 ...

  9. node.js 基础知识之 querystring.stringify querystring.escape

    序列化   1.  querystring.stringify({name:'chenshuai',ago:21,job:"web"})    'name=chenshuai&am ...

  10. javascript 将数字（金额）转成大写

    将计算好的金额转换成大写,这些功能非常多,下面我改进了一下代码(原文在这里:http://www.cnblogs.com/zsanhong/p/3509464.html). /** * _SetNum ...