jQuery when（）似乎不适用于each（）

Question

In the following code, it seems like the code inside of when() is still executing before the loop has finished. The log statement i have in the loop goes in after the one in the when statement. The code is not finishing the loop before executing what's in the when statement resulting in an empty array in my when.

function LocationsForState(state) {
  console.log(state);
  $.ajax({
     url: '/Home/GetApartmentsForStateJSON?state=' + state
  })

  .done(function (apartments) {

     //set up markers 
     var markers = [];

     var geocoder = new google.maps.Geocoder();
     $.each(apartments, function (index, apartment) {
        var address = apartment.Address;

        geocoder.geocode({ 'address': address }, function (results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
              var latitude = results[0].geometry.location.lat();
              var longitude = results[0].geometry.location.lng();

              markers.push({ "latitude": latitude, "longitude": longitude, "icon": "../../Content/img/mapMarker.png", "baloon_text": 'This is <strong>Texas</strong>' });
              console.log('In loop' + markers);
           }
        });
     });

     $.when(markers).then(function () {

        console.log('In when' + markers);

        var myMarkers = { "markers": [markers] };

        //set up map options
        locationMap.mapmarker({
           zoom: 6,
           center: 'United States/' + state,
           markers: myMarkers
        });

     });
  });
}

Answer 1

$.when works on deferred objects such as object returned by $.ajax call and not on an Array of Objects

You don't seem to have fully understand what $.when does.

KNOW MORE ABOUT IT!

Answer 2

In your case this should work,

function LocationsForState(state) {
    console.log(state);
    $.ajax({
        url: '/Home/GetApartmentsForStateJSON?state=' + state
    }).done(function (apartments) {
        //set up markers 
        var markers = [];
        var defs = [];

        var geocoder = new google.maps.Geocoder();
        $.each(apartments, function (index, apartment) {
            var address = apartment.Address;
            var deferred = $.Deferred();
            defs.push(deferred.promise());
            geocoder.geocode({
                'address': address
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();                    
                    markers.push({
                        "latitude": latitude,
                        "longitude": longitude,
                        "icon": "../../Content/img/mapMarker.png",
                        "baloon_text": 'This is <strong>Texas</strong>'
                    });
                    console.log('In loop' + markers);
                    deferred.resolve();
                }
            });
        });

        $.when.apply($, defs).then(function () {
            console.log('In when' + markers);
            var myMarkers = {
                "markers": [markers]
            };

            //set up map options
            locationMap.mapmarker({
                zoom: 6,
                center: 'United States/' + state,
                markers: myMarkers
            });
        });
    });
}

Answer 3

$.when expects deferred objects.

You should do something like:

$.each(apartments, function (index, apartment) {
    var address = apartment.Address;

    // create the deferred object
    var deferred = $.Deferred();

    geocoder.geocode({ 'address': address }, function (results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
          var latitude = results[0].geometry.location.lat();
          var longitude = results[0].geometry.location.lng();

          // resolve the deferred when request is complete
          deferred.resolve({
              "latitude": latitude,
              "longitude": longitude,
              "icon": "../../Content/img/mapMarker.png",
              "baloon_text": 'This is <strong>Texas</strong>'
          });
          console.log('In loop' + markers);
       }
    });

    // add promise to markers
    markers.push(deferred.promise());
 });

Then, you can do:

$.when.apply($, markers).then(...)