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

Answer 2

变化：

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

要：

        $.ajax({
            url: districtNameURL,
            type: "GET",
            async: false
        })
        .success(function (district) {
            districtName = district.organisationUnits[0].name;
            console.log(districtName);
            document.getElementById('districtID').innerHTML = districtName;
        });

这将使get动作停止异步，因此您的逻辑将按预期顺序处理。

在函数完成执行之前执行$ .each之后的代码

2 个答案: