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

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

然后开始执行递归方法，每次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. springboot整合JPA(简单整理，待续---）

    整合步骤 引入依赖: <dependencies> <dependency> <groupId>org.springframework.boot</group ...

  2. Spark大型电商项目实战-及其改良之番外(1)-将spark前端页面效果高效拷贝至博客

    Spark大型电商项目实战-及其改良这个系列的时间轴展示图一直在变....1-3篇是用图直接表示时间轴,用一段简陋的html代码表示时间表.第4篇开始才是用比较完整的前端效果,能移动.缩放时间轴,鼠标 ...

  3. 原创《如何用vue来轻松的驾驭 html5 webapp的页面体验》

    由于最近开始要做mobile的webapp 项目,所以利用周末的时间思考了下页面的体验问题,我主要参考了"微信"的页面体验,总结主要有2个页面切换效果(点击进入页面效果 和 返回上 ...

  4. GOQTTemplate3的多线程化改造

    GOQTTemplate3作为一个QT+OpenCV的平台,希望能够为使用者提供基础的跨平台的图像处理框架.图像处理算法和GUI两个线程的隔离,是必然需要的.在之前的版本中,都采用了OnTimer的方 ...

  5. freeswitch替换默认保持音乐

    1.编译vars.xml文件 上面为注释,下面为新增.指定系统音乐文件路径,reloadxml即可!

  6. 工作中常用的 Linux 命令

    awk 示例: env变量值如下,需要获得pkg_url的链接值: {"name": "michael", "sex": "mal ...

  7. Java核心知识盘点（二）- 缓存使用

    Redis有哪些数据类型 String.Hash.List.Set.ZSet String:字符串 Hash:哈希 Set:集合 List:列表 ZSet:有序集合 Redis内部结构 1.Redis ...

  8. KAFKA跨主机部署网络不通解决思路

    Kafka的部署不仅需要集群可用,同时需要对orderer节点可连,这就是为什么有的时候,kafka集群本身没问题,但是orderer却总是报错. 为了试验kafka剥离方案的可行性,跨阿里云网络和内 ...

  9. 线段树（segment_tree)

    线段树之——区间修改区间查询 1.概述 线段树,也叫区间树,是一个完全二叉树,它在各个节点保存一条线段(即“子数组”),因而常用于解决数列维护问题,基本能保证每个操作的复杂度为O(lgN). 线段树是 ...

  10. ES6解构过程添加一个默认值和赋值一个新的值

    const info = { name: 'xiaobe', } const { name: nickName = '未知' } = info; 其中nickName是解构过程中新声明的一个变量,并且 ...