Geek asks and answers

How to call a function after completing all requests

I have two AJAX requests one by one -

var firstResult;
var secondResult;

FirstAjaxrequest({
        callback: function (options, success, response) {
            if(success)
            {
                firstResult = true;
            }
            else
            {
                firstResult = false;
            }
        }    
    });

SecondAjaxrequest({
     callback: function (options, success, response) {
            if(success)
            {
                secondResult= true;
            }
            else
            {
                secondResult= false;
            }
     }    
});

DisplayMessage(); // This function should display a message depending on     
                     FirstResult and secondResult
+5
source share
5 answers

You can create a variable for each request, which means a successful request. Change this variable for each request, respectively, for a successful request, then call your function.

Inside your function, just check both variables, if they are both correct, then both requests were successful, otherwise at least one was not, and the condition if()was false.

var firstResult = false,
    secondResult = false;

FirstAjaxrequest({
    callback: function (options, success, response) {
        if(success) {
            firstResult = true;
            DisplayMessage();
        }
    }    
});

SecondAjaxrequest({
    callback: function (options, success, response) {
        if(success) {
            secondResult= true;
            DisplayMessage();
        }
    }    
});

function DisplayMessage(){
    if(firstResult && secondResult){
        //Both requests successful
    } else {
        //Either still waiting for a request to complete
        // or a request was not successful.
    }
}
+12
source

EXTJS might be the best way to do this, but a simple JS solution

var firstResult;
var secondResult;
var reqCount = 2;
var returnedCount = 0;

function isDone () {
    returnedCount++
    if ( returnedCount === reqCount ) {
         console.log(firstResult, secondResult);
    }
}

FirstAjaxrequest({
        callback: function (options, success, response) {
            if(success)
            {
                firstResult = true;
            }
            else
            {
                firstResult = false;
            }
            isDone();
        }    
    });

SecondAjaxrequest({
     callback: function (options, success, response) {
            if(success)
            {
                secondResult= true;
            }
            else
            {
                secondResult= false;
            }
            isDone();
     }    
});
+1
source 

FirstAjaxrequest({
            callback: function (options, success, response) {
                if(success)
                {
                    firstResult = true;
                }
                else
                {
                    firstResult = false;
                }
                SecondAjaxrequest({
                     callback: function (options, success, response) {
                            if(success)
                            {
                                secondResult= true;
                            }
                            else
                            {
                                secondResult= false;
                            }
                            DisplayMessage(); // Now we have access to first and second result as the 
                                             //as the second request is within the scope of the first request
                     },
                     scope: this // We can pass the first request to the second request as the context 
                });
            }    
        });
+1

, , . - :

var result1 = null;
var result2 = null;
function DoAjax() {
    $.get(url1, {}, function (data) {
         result1 = data;
         DoSth();
    });
    $.get(url2, {}, function (data) {
         result2 = data;
         DoSth();
    });
}
function DoSth() {
    if(result1 != null && result2 != null) {
         //...
    }
}
0

Warning: jQuery answer. I am not sure I extjshave similar support for Deferred and Promises.

This is a great opportunity to learn about jQuery Deferred :

$.when(firstAjaxrequest(...), secondAjaxrequest(...))
.then(function (firstResult, secondResult) {
    ...
});

This assumes that your function firstAjaxrequestand secondAjaxrequestreturn objects Deferredor Promise, for example, those who return $.ajax.

0
source

More articles:


All Articles