呵呵，思路比较明确，但实现时的JS确实麻烦。
想过用ANGULAR.JS，但不太熟悉。
以前用的JS函数setInterval() 有时停不下来。
后来，看那书上说setTimeout() 可以实现所有setInterval() 功能。
然后，再用promise的then功能来实现先后顺序。。
搞定。。。
短期内不会更新这个版本的进度提示啦。
function resetPercent(id_data){ $.ajax({ url:'/a/reset_percent/' + id_data, success: function(json){ }, }); }; $(".btn-multi-deploy").click(function(){ var group_data = $("#deploy-form").serialize(); var deploy_type = $(this).attr("deploy_type"); var _self = this; var id_array = [] var id_s_array = [] var group_array = group_data.split("&"); for (var key_data in group_array) { if (group_array[key_data].indexOf("deployversion_id") != -1) { deploy_id = group_array[key_data].split("=")[1] }; if (group_array[key_data].indexOf("check-server") != -1) { id_array.push(group_array[key_data].split("=")[1]) }; }; var promiseDEPLOY = $.ajax({ url:'{% url "autodeploy:deploy-group-cmd-v2" %}', type: 'post', data:{ group_cmd: group_data, deploy_type: deploy_type, }, dataType: 'json', beforeSend: function(){ $(_self).attr('disabled',"true"); $(_self).append(" <i class='uk-icon-cog uk-icon-spin'></i>"); for( index=0;index < id_array.length;index++){ resetPercent(id_array[index]); } }, success: function(json){ $(_self).children('i').remove(); $(_self).append(" <i class='uk-icon-cog uk-icon-spin'></i>") }, error: function(){ $(_self).children('i').remove(); }, complete: function(){ $(_self).children('i').remove(); $(_self).append(" <i class='uk-icon-check'></i>") } });/* end promiseDEPLOY stop */ promiseShowStatus = promiseDEPLOY.then(function(){ for( index=0;index < id_array.length;index++){ var key = id_array[index]; queryStatus(key); } function queryStatus(id_subserver){ $.getJSON("/api/subserver/"+id_subserver, function(data,state){ if (state == 'success') { var percent_value, cmd_value; percent_value_array = data.deploy_status.split(","); percent_value = percent_value_array[0]; cmd_value = percent_value_array[1]; $('#' + id_subserver).html("<div class='uk-progress uk-progress-striped uk-progress-active'><div class='uk-progress-bar' style='width: " + percent_value + "%;'>" + cmd_value + ' ' + percent_value + "%</div><i class='uk-icon-cog uk-icon-spin'></i></div>"); if ( percent_value > 98 ){ $('#' + id_subserver).html("<div class='uk-progress uk-progress-striped uk-progress-success'><div class='uk-progress-bar' style='width: " + percent_value + "%;'>100%</div></div>"); clearTimeout(st_func); }; }; } ); console.log('queryStatus...'+id_subserver); var st_func = setTimeout(function(){queryStatus(id_subserver)}, 3000); } }); });
