javascript - 完成所有请求后如何调用函数

Question

我有两个AJAX请求一个接一个-

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

Answer 1

您可以为每个请求创建一个变量，表示请求成功。分别为每个请求更改此变量，当请求成功时，然后调用您的函数。

在您的函数中，只需检查两个变量，如果它们都为真，则两个请求都成功，否则至少有一个不成功，if()条件将为假。

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.
    }
}

Answer 2

在 EXTJS 中可能有更好的方法，但是一个普通的 JS 解决方案是

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();
     }    
});

Answer 3

试试这个

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 
                });
            }    
        });

Answer 4

在每个请求完成后，您应该检查是否收到另一个请求的结果。像这样的一些事情：

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) {
         //...
    }
}

Answer 5

警告：jQuery 答案。我不确定是否extjs对 Deferreds 和 Promises 有类似的支持。

这是了解jQuery Deferred的绝佳机会：

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

这假设您的firstAjaxrequest和secondAjaxrequest函数都返回Deferred或Promise对象，例如由$.ajax.