请教js循环中调用ajax问题

[coolzgt_163]

项目BS架构，通过过程调用服务器上存储过程进行多个数据导入，由于数据比较大，单一个数据可能就要1分钟左右，因此希望在界面上能够看到导入过程，某个项目在导入过程，在界面上能显示正在导入，某个项目导入完成后，在界面上能显示完成，因此前端我通过ajax实现，但是因为js在for中调用ajax会有问题，请问我如下代码要如何更改才能实现我的要求。谢谢。

function importData() {
            var strID="";
            $("input[type='checkbox']:checkbox").each(function(){ 
                if($(this).attr("checked")){
                    strID += $(this).val() + ","
                }
            })
            if (strID == "") {
                alert("请选择需要导入的文件");
            }
            else {
                if (confirm("确定要导入当前选择的文件吗？")) {
                    $("input[type='checkbox']:checkbox").each(function () {
                        if ($(this).attr("checked")) {
                            var configID = $(this).val();
                            importProce(configID);
                        }
                    })
                }
            }
     }

     function importProce(configID) {
         
         $.ajax({
             type: "POST",
             async:true,
             contentType: "application/json; charset=utf-8",
             url: "/Clearing/Import",
             dataType: "json",
             data: JSON.stringify({ configID: configID }),
             beforeSend: function (XMLHttpRequest) {
                 $("#indicator"+configID).show();
             },
             success: function (data) {
                 alert("导入成功");
             },
             complete: function (XMLHttpRequest, textStatus) {
                 $("#indicator"+configID).hide();
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                 alert(textStatus);
             }
         });
     }

[风风不息]

async:true, 改为false；ajax同步模式下，会把数据处理完然后再处理新的

[coolzgt_163]

引用 1 楼 vydoo 的回复:

async:true, 改为false；ajax同步模式下，会把数据处理完然后再处理新的

改为false那在导入某个项目过程中，界面不会显示正在导入，只有导入完成才会显示，不满足我的需求，我搜索了有如下方案，但是不会用，求高手：1、promise 2、递归。求如何修改我上面的代码，谢谢。

[满庭花醉三千客]

手打的，不一定正确

//定义全局变量
var arr = new Array();

 $("input[type='checkbox']:checkbox").each(function () {
                        if ($(this).attr("checked")) {
                            var configID = $(this).val();
                         //这里赋值
                          arr.push(configID);
                        }
                    });
//开始调用
importProce() ;


function importProce() {
          if(arr.length>0){
   $.ajax({
             type: "POST",
             async:true,
             contentType: "application/json; charset=utf-8",
             url: "/Clearing/Import",
             dataType: "json",
             data: JSON.stringify({ configID: arr[0]}),//获取第一个Id
             beforeSend: function (XMLHttpRequest) {
                 $("#indicator"+configID).show();
             },
             success: function (data) {
                 alert("导入成功");
arr.shift();//成功以后移除第一个Id
importProce();//递归
             },
             complete: function (XMLHttpRequest, textStatus) {
                 $("#indicator"+configID).hide();
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                 alert(textStatus);
             }
         });
}

     }