Tips for delaying the execution of numerous ajax success callbacks?

Question

Tips for delaying the execution of numerous ajax success callbacks?

In my JavaScript code, I am facing the following situation:

call_A(success_A)

call_B(success_B)


function call_A(success){
// make ajax request
success(result)
}

function call_B(success){
//make ajax request
success(result)
}


function success_A(){
  //set data to be used by success_B
}

function success_B(){
..do some stuff
}

I need to execute both call_A and call_B consecutively in order to perform AJAX calls efficiently.

I am unable to modify the function headers of call_A and call_B, so I have to specify the success callback function when calling these functions.

My objective is to ensure that regardless of which AJAX call completes first, success_A is invoked before success_B, since the latter relies on data from the former.

What would be the most effective approach to accomplish this?

javascript ajax callback synchronization

Answer 1

Answer №1

var success_A = false;
var success_B = false;

performActionA(successCallback);
performActionB(successCallback);

function performActionA(callback) {
    // make ajax request
    success_A = true;
    callback(result)
}

function performActionB(callback) {
    //make ajax request
    success_B = true;
    callback(result)
}

function successCallback() {
    //assuming you are passing which action A or B is called. Set success_B or success_A to true
    if (success_A == true && success_B == true) {
        // use all variables you need and get the final result
    } else if (success_A == true) {
        // set your desired value into a global variable from a request
    } else if (success_B == true) {
        // set results to use from the B request.
    }
}

Answer 2

var success_A = false;
var success_B = false;

performActionA(successCallback);
performActionB(successCallback);

function performActionA(callback) {
    // make ajax request
    success_A = true;
    callback(result)
}

function performActionB(callback) {
    //make ajax request
    success_B = true;
    callback(result)
}

function successCallback() {
    //assuming you are passing which action A or B is called. Set success_B or success_A to true
    if (success_A == true && success_B == true) {
        // use all variables you need and get the final result
    } else if (success_A == true) {
        // set your desired value into a global variable from a request
    } else if (success_B == true) {
        // set results to use from the B request.
    }
}

Tips for delaying the execution of numerous ajax success callbacks?

Answer №1

Similar questions

Tips for adding a bounding box to an image received from the server

What is the method to adjust the anchor point for a MUI popover?

When buttons contain an image instead of text, event.target.value will be undefined

What steps should be taken to generate a successful pop-up window post registration in PHP?

Nested Promises in Angular's $q Library

What is the reason behind the delayed mutation of the state when invoking the setState method in React?

The selected jQuery plugin is not functioning properly within CodeIgniter framework

Retrieve HTML content from a JSON object and render it on a web page

Setting up a Node.js http2 server along with an http server specifically designed for a single

Ways to obtain the latitudes and longitudes for various routes between a starting point and a destination

What are the steps to create a JSON file structured in a tree format?

In which situations is it required to specify the return type of a function in TypeScript?

Steps to deactivate a JavaScript function once the page has undergone a Page.IsPostBack event

Dynamically loading components within an Angular application

Struggling with ASP.NET MVC Ajax and JQuery integration

Animate an svg icon to follow a designated path as the user scrolls

Issue encountered with Ionic and Angular 2: Denied application of style from 'http://localhost:8100/build/main.css' due to unsupported MIME type ('text/html')

Experiencing a Typescript issue while trying to set a string as the state of a React component with a specified TS type

User-initiated closure of popup triggers error during Google sign in

What is the optimal approach for managing script initialization on both desktop and mobile devices?