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. keepalived 安装配置

    keepalived介绍 1. keepalived 是lvs 的扩展项目,因此它们之间具备良好的兼容性. 2. 通过对服务器池对象的健康检查,实现对失效机器/服务的故障隔离. 3. 负载均衡器之间的 ...

  2. 每天一个linux命令(41)--ping命令

    Linux系统的 ping 命令是常用的网络命令,它通常用来测试与目标主机的连通性,它通过发送 ICMP ECHO_REQUEST数据包到网络主机(send  ICMP  ECHO_REQUEST t ...

  3. 手把手教你用Mysql-Cluster-7.5搭建数据库集群

    前言 当你的业务到达一定的当量,肯定需要一定数量的数据库来负载均衡你的数据库请求,我在之前的博客中已经说明了,如何实现负载均衡,但是还有一个问题就是数据同步,因为负载均衡的前提就是,各个服务器的数据库 ...

  4. 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-3

    来个目录吧: 第一章 第二章 第三章 暂时就这么多.后面路线更新吧 创建.查询.更新.删除 这章主要讲解使用EF完成 增删改查的功能. 自定义"详情信息"页面 我们通过基架生成的代 ...

  5. python服务器环境搭建（1）——本地服务器准备

    去年十月底到新公司上班,由于公司旧系统存在各种问题同时不便于扩展,而公司领导对17年寄予很大的期望,用户量.收入要上一个新台阶,我经过全面评估后,决定全部用python重构过,开发一个基于微服务架构的 ...

  6. React组件开发（一）初识React

    *React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...

  7. Python 3 集合基础和概念！

    Python 3 集合基础和概念! Python 3中,集合是无序的,所以不能进行切片和索引操作. 创建集合有两个方法:set()方法创建的集合是可变的,可被迭代的:frozenset()方法创建的集 ...

  8. 4001: [TJOI2015]概率论

    4001: [TJOI2015]概率论 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 262  Solved: 108[Submit][Status] ...

  9. 用python抓取求职网站信息

    本次抓取的是智联招聘网站搜索“数据分析师”之后的信息. python版本: python3.5. 我用的主要package是 Beautifulsoup + Requests+csv 另外,我将招聘内 ...

  10. 使用python landport库快速实现排行榜

    背景介绍 排行榜业务使用的频率实在太高了,各种活动都会使用排行榜.经过多次开发后我觉得实现一个简单的排行榜库,它能够完成当前我遇到的所有业务逻辑问题,也希望能够帮助到想要快速开发排行榜业务的同行. 我 ...