javascript is getting executed in reverse order

Question

function duplicateCenter(center, email) {
    $.ajax({
        type: "POST",
        url: "../staff/staffDA.php",
        data: "funId=-4&center=" + center + "&email=" + email,
        success: function (data) {
            if (data.split('|')[0] === 'true') {
                alert('Duplicate Entry Found !!\r\n' + data.split('|')[1]);
                return false;
            }
            return true;
        }
    });
    return true;
}

function addCenterInfo() {
   /* some coding and initializations */

    if (!duplicateCenter(center, email)) {
        return;
    }

    alert('hi');
    alert('hi');

    /* more codes */
}

Anyone please help me to understand, why is above function is getting executed in reverse order ?

Current order of execution is

`hi`
`hi`
`Duplicate Entry Found !!`

where as expected execution should only be Duplicate Entry Found !! and it should come out from the function.

score 2 · Answer 1 · edited May 23 '17 at 11:59

duplicateCenter contains AJAX code which is Asynchronous

Anyone please help me to understand, why is above function is getting executed in reverse order ? Code is working in correct Asynchronous order

For more info about AJAX refer this answer:
How do I return the response from an asynchronous call?

Possible Solution: Use callback

function duplicateCenter(center, email, callback) {
  $.ajax({
    type: "POST",
    url: "../staff/staffDA.php",
    data: "funId=-4&center=" + center + "&email=" + email,
    success: function(data) {
      var flag=false;
      if (data.split('|')[0] === 'true') {
        flag=true;
        alert('Duplicate Entry Found !!\r\n' + data.split('|')[1]);
      }
      if(typeof callback==='function') callback(flag);
    }
  });
}

function addCenterInfo() {
  /* some coding and initializations */
  duplicateCenter(center, email, function(isDuplicate) {
    if (isDuplicate) {
      alert('duplicate');
    } else {
      alert('not duplicate');
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 1 · Answer 2 · answered Feb 07 '16 at 07:26

The "A" in "Ajax" stands for "Asynchronous". You are kicking off the duplicateCenter() function before the alerts, but that function then returns without waiting for the response. By the time the call to staffDA.php completes, the alerts have already been executed.

score 0 · Answer 3 · answered Feb 07 '16 at 07:28

AJAX calls are Asynchronous. What this means is that you don't know when they will return. That is why you have to specify a success function in the first place: it only gets called when the AJAX call returns, which could be in less than a second or in many.

So, if you want to call code only after the success method has run, you need to make your code look like this:

function duplicateCenter(center, email) {
    $.ajax({
        type: "POST",
        url: "../staff/staffDA.php",
        data: "funId=-4&center=" + center + "&email=" + email,
        success: function (data) {
            if (data.split('|')[0] === 'true') {
                alert('Duplicate Entry Found !!\r\n' + data.split('|')[1]);
                itWasFalse();
            }
        }
    });
}

function itWasFalse() {
   // just en empty return? so lonely (and not needed - all JS functions return)
}

function moreCodes() {
    alert('hi');
    alert('hi');

    /* more codes */
}

function addCenterInfo() {
   /* some coding and initializations */
   duplicateCenter(center, email);
}

score 0 · Answer 4 · answered Feb 07 '16 at 07:28

0

This is the function declaration, the order in which they will be executed rather depends from the invocation of those functions.

answered Feb 07 '16 at 07:28

user1747036

524
4
12

score 0 · Answer 5 · edited May 23 '17 at 10:28

I have added one extra line of code in my existing function i.e.

async:false

Now, it is working same as I expected.

function duplicateCenter(center, email) {
flag=true;
    $.ajax({
        type: "POST",
        url: "../staff/staffDA.php",
        async:false,
        data: "funId=-4&center=" + center + "&email=" + email,
        success: function (data) {
            if (data.split('|')[0] === 'true') {
                alert('Duplicate Entry Found !!\r\n' + data.split('|')[1]);
                flag=false;
            }else{
               flag=true;
            }

        }
    });
    return flag;
}

Reference : -

jQuery: Performing synchronous AJAX requests

javascript is getting executed in reverse order

5 Answers5