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

最新推荐文章于 2022-06-06 10:58:35 发布

weixin_30698527

最新推荐文章于 2022-06-06 10:58:35 发布

阅读量139

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/melman/p/4504863.html

版权

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

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

然后开始执行递归方法，每次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>

转载于:https://www.cnblogs.com/melman/p/4504863.html

weixin_30698527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在递归函数中使用JQuery.Deferred，异步请求中的同步执行...

标题不知道怎么起合适，其实需求很简单：黑色背景的容器在页面打开时是隐藏的，点击提交后显示。然后开始执行递归方法，每次ajax请求完成时，更新容器内容。在全部执行完成后输出“执行完成”。submit->download->down。中间download方法是起到封装的作用。至于为什么不使用$.ajax【async=false】,因为async会造成UI阻塞，结果就是，...
复制链接

扫一扫