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. 关于input只能输入数字的两种小方法

    第一种: 直接给input标签 name赋值如下 <input name="start_price" id="start_price" type=&quo ...

  2. 数据的增删改查（三层）<!--待补充-->

    进行数据操作必然少了对数据的增删改查,用代码生成器生成的代码不是那么满意!方便在今后使用,这里就主要写“数据访问层(Dal)” 既然这里提到三层架构:有必要将三层内容在这里详细介绍一下(待补充) 注: ...

  3. Java I/O之NIO Socket

    PS:本文简单介绍下旧I/O和NIO下的Socket通讯,仅以UDP来示例. TCP/IP协议 首先简单回顾下TCP/IP协议 Application:应用程序:Socket:套接字:Host:主机: ...

  4. 数据库基础——（SQLserver）约束

                                                              数据库定义:一些存储在硬盘上的数据文件 内存:计算机临时存储的一些数据 .net - ...

  5. 复杂SQL代码实例

    DECLARE @begin DATETIME,@end DATETIME,@shanghutype INT, @beginshanghuarea BIGINT ,@endshanghuarea bi ...

  6. hdoj1242(bfs+priority_queue)

    之前用dfs剪枝AC了,http://www.cnblogs.com/ediszhao/p/4741825.html,这次用bfs+priority_queue来尝试解题 题意:拯救行动,天使r有多个 ...

  7. ubuntu auto mount自动挂载硬盘

    Ubuntu 挂载的文章在网上也不少,推荐一个: http://wenku.baidu.com/link?url=N2c7axijp_KYaYkt2CrZFNZPzzS8xBHLQSTUcI2F85I ...

  8. 使用awk截取某时间段的日志

    想要取出文件里面时间是9点到12点的数据,文件内容如下: 2012-09-05 01:48:47,150 WARN  [WorkManager(3)-72] [service.PhoneRangeMa ...

  9. javascript 随机显示指定内容

    今天碰到一个需求,一个页面显示赞助厂商的信息,但是厂商要求排序要随机排,因为是个静态页面不是读取数据库的,所以打算用js来控制 var arr = new Array('张三', '李四', '王五' ...

  10. 享受release版本发布的好处的同时也应该警惕release可能给你引入一些莫名其妙的大bug

    一般我们发布项目的时候通常都会采用release版本,因为release会在jit层面对我们的il代码进行了优化,比如在迭代和内存操作的性能提升方面,废话不多说, 我先用一个简单的“冒泡排序”体验下r ...