• 在递归函数中使用JQuery.Deferred,异步请求中的同步执行...


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

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

    然后开始执行递归方法,每次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.1.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(0, dtd);
                promise.done(function () {
                    console.error("[应该延时出现]执行完down..");
                    console.error("[应该延时出现]执行完download方法..");
                    odtd.resolve();//通知上层结束
                });
            }
    
    
            function down(index,dtd)
            {
                console.info("开始执行ajax:第[" + (index + 1) + "]个");
                if (index < 3) {
                    $.ajax({
                        url: "/api/user/test"   //每次请求延时5s
                    }).done(function (data) {
                        console.info("第[" + (index + 1) + "]个ajax完成。开始append");
                        var info = "<p>正在执行第[" + (index + 1) + "]个: " + 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>
  • 相关阅读:
    jenkins中通过Publish Over SSH将项目部署到远程机器上
    GitHub 开源的 MySQL 在线更改 Schema 工具【转】
    MySQL ProxySQL读写分离实践
    MySQL ProxySQL读写分离使用初探
    LVS+Keepalived实现DBProxy的高可用
    Redis Codis 部署安装
    CS 和 BS 的区别和优缺点(转)
    Linux的SOCKET编程详解(转)
    数据结构-深度遍历和广度遍历(转)
    社保相关
  • 原文地址:https://www.cnblogs.com/melman/p/4504863.html
Copyright © 2020-2023  润新知