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

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

然后开始执行递归方法，每次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. centos7.4卸载再安装mariadb服务无法启动问题

    今天yum安装MariaDB完成后,启动服务时一直报以下错误 Job for mariadb.service failed. See ‘systemctl status mariadb.service ...

  2. [dart学习]第一篇：windows下安装配置dart编译环境，写出helloworld

    前言 博主非科班出身,平时多用C语言,最近想了解学习一门第二语言,看上了可用于移动开发的目前还小众一点dart,准备用一段比较长的时间来慢慢学习.理解. 关于dart语言不再详细介绍了,大家可以访问  ...

  3. kbmmemtable sorton 报错 ： List index out of bounds

    同一数据集,不同的排序条件,有的可以,但某一条件,却能100%重现报错. procedure TkbmIndex.InternalFastQuickSort(const L,R:Integer); v ...

  4. gzip对字符串的压缩和解压

    package org.jc.plugins.gzip; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStre ...

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

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

  6. 启动Weblogic问题集锦

    报错1:Could not obtain the localhost address. The most likely cause is an error in the network configu ...

  7. android源码编译出现No private recovery resources for TARGET_DEVICE解决方法

    mmm或mm出现以下提示的解决方法:Terminal log:No private recovery resources for TARGET_DEVICE xxxxxxmake: Entering ...

  8. C#线程同步（2）- 临界区＆Monitor

    文章原始出处 http://xxinside.blogbus.com/logs/46740731.html 预备知识:C#线程同步(1)- 临界区&Lock 监视器(Monitor)的概念 可 ...

  9. 踩坑之路---JWT验证

    使用JWT验证客户的携带的token 客户端在请求接口时,需要在request的head中携带一个token令牌 服务器拿到这个token解析获取用户资源,这里的资源是非重要的用户信息 目前我的理解, ...

  10. 读《流畅的python》第一天

    1.跟运算符无关的特殊方法了解: 2.跟运算符相关的特殊方法了解: 3.内置的序列类型分类: 容器序列 list.tuple 和 collections.deque 这些序列能存放不同类型的数据. 扁 ...