Почему мое обещание JQuery разрешается немедленно?

Question

Используя обещания jQuery, я пытаюсь:

1. Вызвать API для всех возможных значений (животного)
2. Вызвать метод API для каждого животного (звук животного))
3. Уведомлять, когда возвращается звук каждого животного - скажем, требуется время, чтобы выработать
4. Уведомлять, когда все звуки животного возвращены

Япомещая все звуковые функции животных в массив, затем вызывая $.when().Я ожидаю, что это разрешится, когда все звуки животных вернутся, но я обнаружил, что это разрешается немедленно.Кто-нибудь знает, что я делаю не так?

function () {
  $('#txtNotification').text('Started ....');

  $.ajax({
    url: "/api/animals/all"
  }).done(function(data) {
    var animalFunctions = [];

    for (var animalType of data) {
      var animalFunction = $.ajax({
        url: "/api/animal/sound/" + animalType
      }).done(function(data) {
        $('#txtNotification').text(data);
      });

      animalFunctions.push(animalFunction);
    }

    $.when(animalFunctions).then(function() {
      $('#txtNotification').text('Done.');
    });
  });
}

Answer 1

$.when() - это одна из немногих функций jQuery, которая не может принять массив - вам нужно будет вызывать его с каждым обещанием в качестве отдельного аргумента:

Путь ES6:

$.when(...animalFunctions).then(() => {
  $('#txtNotification').text('Done.');
});

Путь каменного века:

$.when.apply($, animalFunctions).then(function () {
  $('#txtNotification').text('Done.');
});

Answer 2

jQuery's Deferred.promise() позволяет вам "уведомлять" ход выполнения отдельных пунктов.

var $def = jQuery.Deferred();

$.ajax({
  url: "https://jsonplaceholder.typicode.com/users"
})
.done(function getUsersAsync(users) {
  for (var user of users) {
    $def.notify(`Fetching comments of ${user.username}, ID: ${user.id}`);
    
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/comments",
      data: JSON.stringify({ id: user.id })
    })
    .done(function (arg) {
      // Do stuff with the comments here
    });
  }
  
  $def.resolve(users.length);
})
.fail(function () {
  $def.reject('ERR: Failed retrieving comments');
});


$def
  .progress(function (message) {
    console.log(message);
  })
  .done(function (count) {
    console.log('ALL DONE. Total user: ' + count);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

Добавить return: false к функции anon, переданной .done ().Посмотрите, поможет ли это.

function () {
        $('#txtNotification').text('Started ....');

        $.ajax({
                url: "/api/animals/all"
            })  
            .done(function( data ) {

                var animalFunctions = [];

                for (var animalType of data) {

                    var animalFunction = $.ajax({
                            url: "/api/animal/sound/" + animalType
                        })
                        .done(function(data) {
                            $('#txtNotification').text(data);
                            return false;
                        }
                    );

                    animalFunctions.push(animalFunction);
                }

                $.when(animalFunctions).then(function() {
                    $('#txtNotification').text('Done.');
                });
            });
    }