I need help with these AJAX forms. I need the smallest one to be executed after the others and I want to delay that.

I tried to use setTimeout(), but it seems to not work for me.

I need that because the smaller AJAX with overalleff.php is making calculations from the other two AJAX requests.

// THIS IS THE AJAX FOR THAT I WANT TO DELAY
// THIS AJAX NEED TO BE EXECUTED AFTER OTHERS
function pbutton() {
  $.ajax({
    url: "overalleff.php",
    success: function(data) {
      setTimeout(function() {
        $data
      }, 2000);
    }
  });
}

var barray = [];

function cbutton() {
  $('input:radio[name="cheking"]:checked').val();
  var varies = $("#fromdate").val();
  var varies2 = $("#todate").val();
  if (varies == "" || varies2 == "") {
    alert("Please fill in all 2 fields first and then submit again");
  } else {
    barray.push(varies   "~"   varies2);
    $.ajax({
      type: "POST",
      url: "pickingeff.php",
      data: {
        fromdate: varies,
        todate: varies2
      }
    }).done(function(msg) {});
  }
}

var sarray = [];

function abutton() {
  var varies3 = $("#fromdate").val();
  var varies4 = $("#todate").val();
  if (varies3 == "" || varies4 == "") {
    alert("Please fill in all 2 fields first and then submit again");
  } else {
    sarray.push(varies3   "~"   varies4);
    $('#loadingmessage').show();
    $.ajax({
      type: "POST",
      url: "packingeff.php",
      data: {
        fromdate: varies3,
        todate: varies4
      }
    }).done(function(msg) {
      $('#loadingmessage').hide();
    });
  }
}

CodePudding user response：

Since $.ajax returns a Promise, you can use Promise.all which runs a function after all other promises are over.

function makeThreeAjaxCalls() {
    let p1 = $.ajax("url1");
    let p2 = $.ajax("url2");
    p1.then(callback1)
    p2.then(callback2)
    Promise.all([p1,p2]).then(function() {
        $.ajax("url3").then(callback3);
    });
}