The order in which JavaScript is being executed is being reversed

Question

The order in which JavaScript is being executed is being reversed

function checkForDuplicate(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 processCenterInfo() {
   /* performing necessary steps */

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

    alert('hello');
    alert('hello');

    /* additional code */
}

Can someone explain why the above functions are being executed in reverse order?

Current sequence of execution is

`hello`
`hello`
`Duplicate Entry Found !!`

The expected execution should only be Duplicate Entry Found !!, and it should exit the function.

javascript ajax

Answer 1

Answer №1

duplicateCenter function includes AJAX code which operates Asynchronously

I need assistance in understanding why the above function is executing in reverse order? The code is functioning correctly in an asynchronous manner

For further information on AJAX, please check out this answer:
How do I return the response from an asynchronous call?

Possible Solution: Utilize callback functions

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>

Answer 2

duplicateCenter function includes AJAX code which operates Asynchronously

I need assistance in understanding why the above function is executing in reverse order? The code is functioning correctly in an asynchronous manner

For further information on AJAX, please check out this answer:
How do I return the response from an asynchronous call?

Possible Solution: Utilize callback functions

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>

Answer 3

Answer №2

It's important to note that in the term "Ajax," the letter "A" represents "Asynchronous." One thing to consider is that you are initiating the duplicateCenter() function prior to the alerts, however, this function ends without pausing for a response. Consequently, once the call to staffDA.php finishes, the alerts have already been triggered.

Answer 4

It's important to note that in the term "Ajax," the letter "A" represents "Asynchronous." One thing to consider is that you are initiating the duplicateCenter() function prior to the alerts, however, this function ends without pausing for a response. Consequently, once the call to staffDA.php finishes, the alerts have already been triggered.

Answer 5

Answer №3

When making AJAX calls, it is important to remember that they are asynchronous. This means that you cannot predict exactly when the call will return. To handle this unpredictability, a success function must be specified. This function only executes once the AJAX call has returned, which could happen in mere seconds or take longer.

To ensure that your code runs only after the success method has finished its execution, follow this structure:

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 an empty return? How lonely (and unnecessary - all JS functions return)
}

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

    /* additional codes */
}

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

Answer 6

When making AJAX calls, it is important to remember that they are asynchronous. This means that you cannot predict exactly when the call will return. To handle this unpredictability, a success function must be specified. This function only executes once the AJAX call has returned, which could happen in mere seconds or take longer.

To ensure that your code runs only after the success method has finished its execution, follow this structure:

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 an empty return? How lonely (and unnecessary - all JS functions return)
}

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

    /* additional codes */
}

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

Answer 7

Answer №4

The sequence in which function declarations are executed can vary depending on how they are invoked.

Answer 8

The sequence in which function declarations are executed can vary depending on how they are invoked.

Answer 9

Answer №5

I made a small tweak in my function by adding an extra line of code:

async:false

With this change, the function now behaves exactly as I had anticipated.

function checkDuplicate(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;
}

For more information, visit:

jQuery: Performing synchronous AJAX requests

Answer 10

I made a small tweak in my function by adding an extra line of code:

async:false

With this change, the function now behaves exactly as I had anticipated.

function checkDuplicate(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;
}

For more information, visit:

jQuery: Performing synchronous AJAX requests

The order in which JavaScript is being executed is being reversed

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

I'm puzzled as to why, but my code seems to be causing an issue with the command prompt, possibly due

When resetting the function, make sure to move the class to the closest sibling element

Load a webpage using javascript while verifying permissions with custom headers

The cannon-es program experiences crashes every time two Convex polyhedrons collide with each other

Sleek transition-ready zoom functionality for THREE JS with clickable controls

Continuous scrolling feature for dynamically loaded content via ajax requests

What is the best method for linking two ajax requests together?

JavaScript personalized video controls. Silence the video by manipulating the input range element

The npm module parsing has encountered an error... It appears that a suitable loader is required to process this file format

``I'm having trouble getting the onchange event to function properly in a customized

Changing the parent scope from the child component does not automatically reflect changes in an ng-repeat

What is the process of invoking a secondary "external" function with Nodejs, Expressjs, and bluebird?

Animating object properties instead of static values

What is the formula to determine if x is greater than y and also less than z?

Unable to utilize Bower due to a node.js malfunction

Navigating through states in AngularJS

Modify the parent div's background color on mouseover of the child li

Guide on updating the form structure with ajax

How can I invoke a function within a directive-generated HTML element's scope?

Having trouble retrieving a value within the jQuery.ajax success function