Make sure first ajax function finishes before second one

Question

I have a JavaScript function that makes two consecutive Ajax requests using jQuery. I want to make sure that the first request has loaded before the second function is call

Answer 1

Edit: Misread the question; my bad. If you ever want to have two AJAX requests executed concurrently but run a callback only after both have finished, this is how you do it!

Try this:

var completedCount = 0;
var callback = function()
{
    completedCount++;
    if (completedCount == 2)
    {
        // Do something.
    }
};

$.post('url-1', {}, callback);
$.post('url-2', {}, callback);

Answer 2

For best results you should probably invoke the second function in the callback of the first.

For Example:

$.post("http://www.somewebsite.com/page.php", function(data) {
  // whatever
  function2();
});

Answer 3

Since jQuery requests return thenables, in modern browsers, you can await each call. For example:

async function fetchBoth() {
  const todo1 = await $.get('https://jsonplaceholder.typicode.com/todos/1');
  const todo2 = await $.get('https://jsonplaceholder.typicode.com/todos/2');
}

fetchBoth();

async function fetchBoth() {
  console.log('start 1');
  const todo1 = await $.get('https://jsonplaceholder.typicode.com/todos/1');
  console.log('got todo1', todo1);
  console.log('start 2');
  const todo2 = await $.get('https://jsonplaceholder.typicode.com/todos/2');
  console.log('got todo2', todo2);
}

fetchBoth();

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

Don't use async: false. Synchronous ajax requests are deprecated and should not be used; if used, users will probably see console warnings as a result.

Note that this use of await works just fine for any sort of Promise, not ajax requests, and not just jQuery. For example:

async function fetchBoth() {
  console.log('start 1');
  const todo1 = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
  console.log('got todo1', todo1);
  console.log('start 2');
  const todo2 = await fetch('https://jsonplaceholder.typicode.com/todos/2').then(res => res.json());
  console.log('got todo2', todo2);
}

fetchBoth();