The Ajax request (b) fired off during the callback of an earlier Ajax request (a) finishes before (a) itself is fully

Question

The Ajax request (b) fired off during the callback of an earlier Ajax request (a) finishes before (a) itself is fully

I encountered an issue with my code where an ajax call, referred to as callback (b), was expected to depend on the success of another ajax call, known as callback (a). Surprisingly, callback (b) completed successfully before its parent ajax call (a) finished.

Here is the Javascript code:

var ajaxAdata; //global

ajaxA(ajaxB(1));

function ajaxA(callback){
       FB.api('/me', function(response) { //ajax call(a)
            ajaxAdata = response.id; 
            callback(); // this completes before ajax call(a) completes
       }
}

ajaxB = function(isPublic) {
       .getJSON(){ //ajax call (b)
            console.log(ajaxAdata); // necessary ajaxAdata returns undefined
        }
}

Is there a misunderstanding on my part when it comes to JavaScript? I have learned that using a callback function is the correct approach for handling asynchronous calls. However, does JavaScript preemptively execute the ajaxB function and initiate .getJSON() even before the FB.api() call has concluded?

javascript ajax asynchronous callback

Answer 1

Answer №1

Your decision

ajaxX(ajaxY(1));

triggers ajaxY(1) prior to the invocation of ajaxX in order to provide the parameter value for ajaxX.

The correct approach would be

ajaxX(ajaxY, 1);

and

function ajaxX(callback, param){
       FB.api('/me', function(response) { //ajax call(a)
            ajaxAdata = response.id; 
            callback(param); // this is executed before ajax call(a) is finished
       }
}

Answer 2

Your decision

ajaxX(ajaxY(1));

triggers ajaxY(1) prior to the invocation of ajaxX in order to provide the parameter value for ajaxX.

The correct approach would be

ajaxX(ajaxY, 1);

and

function ajaxX(callback, param){
       FB.api('/me', function(response) { //ajax call(a)
            ajaxAdata = response.id; 
            callback(param); // this is executed before ajax call(a) is finished
       }
}

Answer 3

Answer №2

The correct order is:

ajaxA(function() {ajaxB(1);} );

Prior to this, you were executing the ajaxB() function first and passing its return value (undefined) as the callback parameter to ajaxA(). The desired approach is to pass a function that contains the call to ajaxB() as the callback instead.

Answer 4

The correct order is:

ajaxA(function() {ajaxB(1);} );

Prior to this, you were executing the ajaxB() function first and passing its return value (undefined) as the callback parameter to ajaxA(). The desired approach is to pass a function that contains the call to ajaxB() as the callback instead.

Answer 5

Answer №3

ajaxA(ajaxB(1));

Executing ajaxB first, then using the result as an argument for ajaxA.

Remember to pass in the function itself, not the result.

Try this:

ajaxA(ajaxB);

In ajaxA, pass your argument to the callback like this:

callback(1);

Answer 6

ajaxA(ajaxB(1));

Executing ajaxB first, then using the result as an argument for ajaxA.

Remember to pass in the function itself, not the result.

Try this:

ajaxA(ajaxB);

In ajaxA, pass your argument to the callback like this:

callback(1);

Answer 7

Answer №4

Executing ajaxB is crucial at this point:

ajaxB(1)

In my opinion, one possible solution is to return a function from ajaxB, or alternatively, figure out a way to pass the isPublic flag to your ajaxA function like so:

ajaxA(ajaxB, 1);

function ajaxA(callback, isPublic){
      FB.api('/me', function(response) { //ajax call(a)
            ajaxAdata = response.id; 
            callback(isPublic); //this action is completed before ajax call(a) finishes
       }
}

Answer 8

Executing ajaxB is crucial at this point:

ajaxB(1)

In my opinion, one possible solution is to return a function from ajaxB, or alternatively, figure out a way to pass the isPublic flag to your ajaxA function like so:

ajaxA(ajaxB, 1);

function ajaxA(callback, isPublic){
      FB.api('/me', function(response) { //ajax call(a)
            ajaxAdata = response.id; 
            callback(isPublic); //this action is completed before ajax call(a) finishes
       }
}

The Ajax request (b) fired off during the callback of an earlier Ajax request (a) finishes before (a) itself is fully

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

MUI: Autocomplete received an invalid value. None of the options correspond to the value of `0`

Display and conceal elements within predetermined time intervals using jQuery, while ensuring that the final element remains visible

Changes to the className of a React component will trigger a re-render of

Stopping the Game Loop in Windows Phone 8.1 with WinJS

An Illustration of Basic Nested Controller within Directive Parameters

Do not include objects in the search results that lack necessary information

The conversion of AJAX crawling into hashbang URLs

Tips for extracting information from a website that uses Javascript with Python?

guarantee that a DOM setting is ready for enzyme

Using AngularJS controller to implement filtering functionality

I encountered an error while setting up Vue.js on my computer

Triggering JavaScript Function When Scrolling in Overflowed DIV

Guide to extracting a specific value from a JSON object with JavaScript

What is the reason behind this HTML/CSS/jQuery code functioning exclusively in CodePen?

Unable to transmit Props to Component - Fluctuating Behavior

Connecting a Node.js Redis client to a Redis cloud server: Step-by-step guide

Maintaining the current image while awaiting the completion of the new image update

Page_Load method does not get invoked during a POST request

Enhancing Navbar Design with Tailwind CSS in NextJS and React

Navigating to and Revealing a Division by Clicking