Question

我正在开发一个项目，在这个项目中我需要进行多个JSON调用。一旦我退出该循环，我需要处理我所做的所有调用的结果。我很难理解如何按照我的操作顺序来完成这些调用。在完成对服务的调用之前，始终执行处理结果的代码。我创建了一个jsfiddle来演示并在这里包含代码。

http://jsfiddle.net/VEkrf/3/

    var sourceData = { "fooIndex": "foo",
        "barIndex": "bar"
    }
    var destinationData = {};
    for (var sourceIndex in sourceData) {
        $.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?', null, function (result) {
            for (var resultIndex in result) {
                alert("Adding " + resultIndex + " : " + result[resultIndex]);
                destinationData[resultIndex] = result[resultIndex];
            }
        });
    }

    if (Object.keys(destinationData).length == 0) {
        alert("Destination not yet populated");
    }
    else {
        alert("Eureka!  You did it!");
    }

Answer 1

这看起来像是jQuery Deferred Object和我的伙伴$.when的工作！

将所有$.getJSON来电转至$.when，完成后，我将调用所有结果的函数。

检查出来：

var sourceData = {
    "fooIndex": "foo",
    "barIndex": "bar"
};
var destinationData = {};

// Array of AJAX calls
var AJAX = [];

for (var sourceIndex in sourceData) {
    AJAX.push($.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?'));
}

// Apply is needed to pass each element as a parameter
$.when.apply($, AJAX).done(function(){
    // This function will be called when all the AJAX calls are done

    // The arguments of the functin are the responses from each request
    for(var i = 0, len = AJAX.length; i < len; i++){
        var result = arguments[i][0];
        //arguments: [resultObj, 'success', jqXHR]
        for (var resultIndex in result) {
            alert("Adding " + resultIndex + " : " + result[resultIndex]);
            destinationData[resultIndex] = result[resultIndex];
        }
    }

    alert("Eureka!  You did it!");
});

注意：由于这是异步的，因此在触发回调之前，destinationData将不可用。将任何使用的代码放在 .done()回调中。

Answer 2

由于您已经在使用jQuery，我建议您探索队列函数。您可以对ajax调用进行排队，然后在成功处理程序中调用de-queue或next函数。这样他们就会相继出现。添加到队列的最后一项是处理返回数据的函数。

var sourceData = {
    "fooIndex": "foo",
    "barIndex": "bar"
};
var destinationData = {};

$(function () {
    console.debug('ready');
    for (var sourceIndex in sourceData) {
        console.debug('for Loop');
        $(document).queue('ajax', function (next) {
            $.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?', null, function (result) {
                for (var resultIndex in result) {
                    alert("Adding " + resultIndex + " : " + result[resultIndex]);
                    destinationData[resultIndex] = result[resultIndex];
                    next();
                }
            });
        });
    }

    $(document).queue('ajax', function (next) {
        alert("Eureka!  You did it!");
    });
    $(document).dequeue('ajax');
});

我一直都在为'synchronus'ajax做这件事。

here is an example of what i am talking about

来自javascript的同步Json调用

2 个答案: