多个AJAX请求,带执行进度及结果

    function CreateAll() {
        var len = $("[src='/images/err.png'][title='点击重新生成']").length;
        var layerMsg = layer.open({
            title: "正在生成,共有" + len + "个试题正在生成",
            content: "当前第已成功生成<span id='buildOk' style='color:red; padding:5px;'>0</span>个!",
            btn: ['关闭'],
            yes: function() {
                layer.close(layerMsg);
            },
            success: function() {
                var cnt = 0;
                var ok = 0;
                var ids = new Array;
                $("[src='/images/err.png'][title='点击重新生成']").each(function() {
                    ids.push($(this).attr("id").replace("ibtn", ""));
                });
                $("#curItem").text(ids.length);
                var requests = new Array;
                for (var i = 0; i < ids.length; i++) {
                    var id = ids[i];
                    var aid = $("#ibtn" + id).data("aid");
                    var orderNo = $("#ibtn" + id).data("orderno");
                    requests.push(createItem(aid, id, orderNo, $("#ibtn" + id), false));
                }
               
                // 初始化进度为0
                var progress = 0;

                // 使用$.when()执行顺序
                $.when.apply($, requests).then(
                    function () {
                        // 所有请求成功完成时的回调
                        layer.close(layerMsg);
                    },
                    function () {
                        // 任何一个请求失败时的回调
                        alertify.error("发生了一个错误的请求!");
                    }
                );

                // 对每个请求进行进度更新
                requests.forEach(function (request, index) {
                    request.progress(function (e) {
                        // 更新进度条
                        progress = (index + e.loaded / e.total) / requests.length;
                        console.log('Progress:', progress);
                    }).done(function (response) {
                        ok++;
                        // 单个请求成功时的回调
                        console.log('Request ' + index + ' completed:', response);
                        $("#buildOk").text(ok);
                    }).fail(function (error) {
                        // 单个请求失败时的回调
                        //console.log('Request ' + index + ' failed:', error);
                    });
                });
            }
        });

    }

这里用到了第三方的两个组件,一个是layer,一个alertify,异步函数是

createItem(aid, id, orderNo, $("#ibtn" + id), false)

在这个函数体内要ajax请求,要加上done的回调 ,格式是$.ajax({请求内容}).done(function(){'回调内容'}),要不然progress会报错.

 

posted @ 2024-07-20 13:24  猫狼  阅读(17)  评论(0编辑  收藏  举报