标题不知道怎么起合适，其实需求很简单：

黑色背景的容器在页面打开时是隐藏的，点击提交后显示。

然后开始执行递归方法，每次ajax请求完成时，更新容器内容。

在全部执行完成后输出“执行完成”。

submit->download->down。中间download方法是起到封装的作用。

至于为什么不使用$.ajax【async=false】,因为async会造成UI阻塞，结果就是，直到方法完全执行结束才会更新UI，与我们的需求不符合。

睡觉去...具体实现详细童鞋自己看代码吧...

栗子代码：

<html>

<head>

    <title>JQ延迟执行</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

    <script type="text/javascript" src="/scripts/jquery-1.9..min.js"></script>

</head>

<body>

    <div class="info" style="color:#00ff90;background-color:#000;padding:3px 10px;display:none">执行准备中...</div>

    <input type="button" id="submit" value="提交">

</body>

</html>

<script type="text/javascript">

    $(function () {

        function download(odtd) {

            console.info("开始download方法..");

            console.info("开始设置容器显示..");

            $(".info").show();

            console.info("容器已显示..");

            console.info("开始执行down..");

            var dtd = $.Deferred();

            var promise = dtd.promise();

            down(, dtd);

            promise.done(function () {

                console.error("[应该延时出现]执行完down..");

                console.error("[应该延时出现]执行完download方法..");

                odtd.resolve();//通知上层结束

            });

        }

        function down(index,dtd)

        {

            console.info("开始执行ajax:第[" + (index + ) + "]个");

            if (index < ) {

                $.ajax({

                    url: "/api/user/test"   //每次请求延时5s

                }).done(function (data) {

                    console.info("第[" + (index + ) + "]个ajax完成。开始append");

                    var info = "<p>正在执行第[" + (index + ) + "]个： " + data + "<p>";

                    $(info).appendTo($(".info"));

                    console.info("开始进入下一次的down()");

                    down(++index, dtd);

                });

            }

            else {

                $("<p>执行完成</p>").appendTo($(".info"));

                dtd.resolve();//通知上层结束

            }

        }

        $("#submit").click(function () {

            console.info("submit点击开始执行内部..");

            var odtd = $.Deferred();

            var promise = odtd.promise();

            download(odtd);

            promise.done(function () {

                console.error("[应该延时出现]submit内部执行完download之后..");

                console.error("[应该延时出现]我应该最后出现..");

            });

            console.error("[应该延时出现]错误的延时演示..");

        });

    });

</script>

在递归函数中使用JQuery.Deferred，异步请求中的同步执行...的更多相关文章

  1. javascript 异步请求封装成同步请求

    此方法是异步请求封装成同步请求,加上token验证,环境试用微信小程序,可以修改文件中的ajax,进行封装自己的,比如用axios等 成功码采用标准的 200 到 300 和304 ,需要可以自行修改 ...

  2. springboot 中如何正确在异步线程中使用request

    起因: 有后端同事反馈在异步线程中获取了request中的参数,然后下一个请求是get请求的话,发现会偶尔出现参数丢失的问题. 示例代码: @GetMapping("/getParams&q ...

  3. 利用 Jquery Deferred 异步你的程序

    最近在做公司QA系统改造时,有这样的一个场景. QA系统中有些数据项需要从JIRA平台(一个国外项目与事务跟踪工具)中获取,JIRA平台提供了很完善的Rest API. 现在的要求是,在QA系统中提交 ...

  4. php中使用fsockopen实现异步请求

    php执行一段程序,有可能几毫秒就执行完毕,也有可能耗时较长.例如,用户下单这个事件,如果调用了些第三方服务进行发邮件.短信.推送等通知,可能导致前端一直在等待.而有的时候,我们并不关心这些耗时脚本的 ...

  5. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  6. jQuery Ajax(异步请求)

    jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...

  7. 异步请求中jetty处理ServletRequestListener的坑

    标题起得比较诡异,其实并不是坑,而是jetty似乎压根就没做对异步request的ServletRequestListener的特殊处理,如果文中有错误欢迎提出,可能自己有所疏漏了. 之前遇到了一个b ...

  8. 微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...

  9. WeChat-SmallProgram：微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...

  10. ASP.NET MVC 中使用 jQuery 实现异步搜索功能

    常见的几种异步请求方式: Ajax.BeginForm   异步提交文本的形式 Ajax.ActionLinkk 文本链接的形式 Client Validataion  客户端的认证 一.用jQuer ...

随机推荐

  1. webservice接口的开发和调用

    一.WebService的开发手段 使用Java开发WebService时可以使用以下两种开发手段 1. 使用JDK开发(1.6及以上版本) 2.使用CXF框架开发(工作中) 二.使用JDK开发Web ...

  2. tensorflow学习笔记1：导出和加载模型

    用一个非常简单的例子学习导出和加载模型: 导出 写一个y=a*x+b的运算,然后保存graph: import tensorflow as tf from tensorflow.python.fram ...

  3. ssm框架搭建的基本配置（一站式教会你搭建）

    首先是需要的jar包: <dependency> <groupId>org.springframework</groupId> <artifactId> ...

  4. Python批量合并处理B站视频

    最近想学习后端,又不想花钱,怎么办呢?于是在手机端B站(哔哩哔哩)上面找到了满意的免费视频教程,但是手机端看起来很不方便啊.于是,我通过在手机端缓存下来后,导入到了电脑端,但是我后面了发现两个问题: ...

  5. webservice生成客户端代码

    wsimport -d C:\Other\WSDL_JAVA_Code -keep -verbose -Xauthfile C:\Other\.txt http://XXXXXX

  6. 【题解】Luogu P4867 Gty的二逼妹子序列

    原题传送门 同Luogu P4396 [AHOI2013]作业 询问多了10倍,但还能跑过(smog #include <bits/stdc++.h> #define N 100005 # ...

  7. 算法（第四版）C# 习题题解——2.2

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 查找更为方便的版本见:http ...

  8. Centos7.2（linux）minimal install之后需要的操作

    minimal install之后,很多命令都不存在,例如ifconfig, wget等等 首先,需要先配置网络,保证机器可以连上互联纲 ip addr可以查看网卡的基本信息 一般默认就只有两个,一个 ...

  9. 20175307《Java程序设计》第8周学习总结

    教材学习内容总结 本周学习<Java程序设计>第十五章: 泛型: 泛型(Generics)的主要目的是可以建立具有类型安全的集合框架,如链表.散列映射等数据结构. 泛型类声明:class ...

  10. Java基础语法(二)之流程控制语句

    流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块 .控制语句分为三类:顺序,选择和循环. “顺序结构”代表”先执行a,再执行b”的逻辑.比如,先找个女朋友, ...