Выполнить Ajax-запрос, когда закончится другой

Question

Я перебираю слой маркера на карте Leaflet, чтобы поймать широту и долготу каждого маркера, и отправляю эти координаты в мою базу данных с помощью Ajax.

Затем, когда я отправил широту и долготу каждого маркера в моей базе данных, я хочу вызвать мой слой WFS с другим Ajax, чтобы показать новые маркеры, добавленные в мою базу данных.

Для этого я хочу назвать свой второй Ajax после того, как первый закончил, поэтому я попытался использовать $.when(). Done(), но он не работает.

Если я отправляю координаты нескольких маркеров, это работает, но если я пытаюсь отправить 200 маркеров, второй Ajax выполняется до конца первого, и мой слой WFS не отображается. Если я установлю тайм-аут на второй Ajax, чтобы дать время на выполнение первого Ajax, это сработает, но это не решение.

Вот мой код:

var dialog_create = $('#dialog_create').dialog();
dialog_create.dialog(options, {
  buttons: {
    Add: function() {
      $.when(
        layer.eachLayer(function(layer) {
          latGPS = layer.getLatLng().lat;
          lngGPS = layer.getLatLng().lng;

          $('#latitudeEP').val(latGPS);
          $('#longitudeEP').val(lngGPS);

          data = $("#formulaireEP").serialize();

          $.ajax({
            url: 'assets/php/create/create_EP.php',
            type: $("#formulaireEP").attr('method'),
            data: data,
            success: function() {
              dialog_create_EP.dialog("close");
              $("#formulaireEP")[0].reset();
            }
          })
        })
      ).done(function(data) {
        //setTimeout(function(){
        $.ajax({
          url: owsrootUrlAssainissement + L.Util.getParamString(parametersEP),
          dataType: 'jsonp',
          jsonpCallback: 'callEP'
        }).done(EPvannes1);
        //},5000);
      });
      return false;
    },
    Cancel: function() {
      dialog_create_EP.dialog("close");
    },
  }
});
dialog_create_EP.dialog("open");

РЕДАКТИРОВАТЬ:

Вот моя лучшая попытка использования отложенного объекта, но он не работает...

var dialog_create = $('#dialog_create').dialog();
dialog_create.dialog(options, {
  buttons: {
    Add: function() {
    var defer = $.Deferred();

      function getAjaxDeffered(){
        layer.eachLayer(function(layer) {
          latGPS = layer.getLatLng().lat;
          lngGPS = layer.getLatLng().lng;

          $('#latitudeEP').val(latGPS);
          $('#longitudeEP').val(lngGPS);

          data = $("#formulaireEP").serialize();

          $.ajax({
            url: 'assets/php/create/create_EP.php',
            type: $("#formulaireEP").attr('method'),
            data: data,
            success: function() {
              dialog_create_EP.dialog("close");
              $("#formulaireEP")[0].reset();
            }
          })
        })
      }

      defer.resolve(getAjaxDeffered());

      $.when(defer).then(function(data) {
        //setTimeout(function(){
        $.ajax({
          url: owsrootUrlAssainissement + L.Util.getParamString(parametersEP),
          dataType: 'jsonp',
          jsonpCallback: 'callEP'
        }).done(EPvannes1);
        //},5000);
      });
      return false;
    },
    Cancel: function() {
      dialog_create_EP.dialog("close");
    },
  }
});
dialog_create_EP.dialog("open");

Answer 1

Выглядит как твой layer.eachLayer Функция не возвращает Обещание / Отложено. Вдоль jQuery doc:

Если в jQuery.when() передается один аргумент, и он не является отложенным или обещанием, он будет рассматриваться как разрешенный отложенный, и любые присоединенные doneCallbacks будут выполнены немедленно.

Answer 2

Итак, я нашел решение благодаря этому сообщению: jquery отложено в цикле.each

Вот мой окончательный код для потомков;-):

var dialog_create = $('#dialog_create').dialog();
dialog_create.dialog(options, {
  buttons: {
    Add: function() {
 
      function getAjaxDeffered(){

      var promises = [];

        layer.eachLayer(function(layer) {

        var def = new $.Deferred (); 

          latGPS = layer.getLatLng().lat;
          lngGPS = layer.getLatLng().lng;
 
          $('#latitudeEP').val(latGPS);
          $('#longitudeEP').val(lngGPS);
 
          data = $("#formulaireEP").serialize();
 
          $.ajax({
            url: 'assets/php/create/create_EP.php',
            type: $("#formulaireEP").attr('method'),
            data: data,
            success: function() {
              def.resolve();
              dialog_create_EP.dialog("close");
              $("#formulaireEP")[0].reset();
            }
          })
          promises.push(def)
        })
      return $.when.apply(undefined, promises).promise();
      }
 
      defer.resolve(getAjaxDeffered());
 
      getAjaxDeffered().then(function(data) {
        $.ajax({
          url: owsrootUrlAssainissement + L.Util.getParamString(parametersEP),
          dataType: 'jsonp',
          jsonpCallback: 'callEP'
        }).done(EPvannes1);
      });
      return false;
    },
    Cancel: function() {
      dialog_create_EP.dialog("close");
    },
  }
});
dialog_create_EP.dialog("open");