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

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

然后开始执行递归方法，每次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. python画手绘图

    第一步:插入代码 #e17.1HandDrawPic.py from PIL import Image import numpy as np vec_el = np.pi/2.2 # 光源的俯视角度, ...

  2. 下拉框click事件与搜索框blur事件的爱恨纠葛

    还原车祸现场 功能类似于百度搜索,搜索框输入内容,下拉框显示候选项,点击候选项就选择候选项,然后下拉框隐藏,点击外面就直接隐藏下拉框,于是我写了以下代码 //参会单位联想 $('input[name= ...

  3. KVO的使用三：基于runtime实现KVO

    苹果的KVO原理通过isa-swizzling技术实现,本质实现逻辑是在runtime时添加一个子类,重写set方法进行操作,现在我们也基于runtime来实现一个KVO. 首先新建一个Person类 ...

  4. 《一些神奇的JS功效》

    1: async 异步回调 (ES6) async function test(){ console.log("hello wolrd"); } test().then(funct ...

  5. 泛型集合List的详细用法

    命名空间:   System.Collections.Generic List<T>类是 ArrayList 类的泛型等效类.    该类使用大小可 按需动态增加 的数组实现 IList& ...

  6. range 小数据池介绍

    1.range 2.小数据池 1. range 范围 [起始位置:终止位置:步长]range(起始位置,终止位置,步长) #顾头不顾尾 3.小数据池 小数据池,也称为小整数缓存机制,或者称为驻留机制等 ...

  7. Oracle中connect by用法示例

    在工作中常常会遇到一些数据表包含父子关系的数据,比如行业.地区等等,如果需要将其节点按父子关系一步一步列出来,就需要使用connect by了. 如有由自身行业代码basecode和父行业代码pare ...

  8. 关于C#的Main(String[] args)参数输入问题

    关于C#的Main(String[] args)参数输入问题 指定相关的测试代码 首先,写一个用于测试的关于Main(String[] args)参数输入有关的代码类,如下: using System ...

  9. 一.MySQL安装

    版本:linux7.6 一.编译安装 1.下载epel源 [root@db01 ~]# wget -O /etc/yum.repos.d/epel.repo https://mirrors.aliyu ...

  10. company_credit

    /** * Created by wu-yj on 2016/5/6. */ import java.sql.{Connection, DriverManager, PreparedStatement ...