多个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会报错.