javascript - $.each 之后的代码在函数执行完毕之前执行

Question

我里面有一个函数，我正在使用 $.each 方法。我想在 $.each 完全执行后调用另一个函数alertMsg()。但是当我使用断点时，我可以看到在完成 $.each 方法之前它会执行alertMsg 函数。为什么？怎么解决。

   function test(hospitalJson,blockJson){

    $.each(hospitalJson.organisationUnits, function (i, curr_hos) {

        if (curr_hos.id == orgUnit.id) {
            var stringPath=[];
            stringPath= curr_hos.path.split("/");
            outerloop:
                    for(var i=0;i<stringPath.length;i++){
                        for(var j=0;j<blockJson.length;j++){
                            if(stringPath[i]==blockJson[j].id){
                                document.getElementById('blockID').innerHTML = blockJson[j].id;
                                break outerloop;
                            }
                        }

                    }

            // to get district name
            var districtNameURL="../api/organisationUnits.json?fields=name&filter=id:in:[" + curr_hos.path.split("/")[4] + "]" ;

            $.get(districtNameURL,function(district){
                districtName=district.organisationUnits[0].name;
                console.log(districtName);
                document.getElementById('districtID').innerHTML = districtName;
            });

            alertMsg = 1;
            return false;
        }


    });
    //this message execute before finishing $.each
    alert(alertMsg);
}

Answer 1

由于$.each内部有多个AJAX调用，因此需要创建一个包含Promise的数组需要解决的对象。因为您可能不知道解析的 JSON 对象的确切大小和 jQuery $.when无法处理扩展其功能所需的数组。

function test(hospitalJson, blockJson) {
  var deferreds = [];

  $.each(hospitalJson.organisationUnits, function(i, curr_hos) {

      //...
      deferreds.push(
        $.get(districtNameURL, function(district) {
          districtName = district.organisationUnits[0].name;
          console.log(districtName);
          document.getElementById('districtID').innerHTML = districtName;
        }));
    }
    return deferreds;

  });
}


var resolveData = test(hospitalJson, blockJson);
$.when.apply(null, resolveData).done(function() {
  alert(alertMsg);
});

<强> JSfiddle demo