JQuery.when понимание

Я пытаюсь использовать jQuery.when, чтобы запустить два запроса ajax, а затем вызвать некоторую функцию после завершения двух запросов. Здесь мой код:

var count = 0;
var dfr;

var showData = function(data) {
    dfr.resolve();
    alert(count);
   // Do something with my data data received
};

var method1 = function() {
    dfr = $.Deferred();

    return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: showData
    });
};

var method2 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            count = data.d.__count;
        }
    });
};

$.when(method1(), method2())
    .then(showData());

Однако это не работает должным образом. Ajax-вызов в method1 будет возвращать данные, которые будут использоваться в showData(), а вызов Ajax в method2 будет возвращать счет, который должен быть назначен счету var, а затем использован в showData().

Но когда я запускаю вышеуказанный код, вызывается method1, а затем method2, а затем showData оставляя данные в showData как 'undefined'. Как я могу достичь этого с помощью $.when, который, насколько я знаю, выполняется только тогда, когда выполняются обе функции, возвращающие $.promise. Я хочу, чтобы оба вызова ajax вызывались параллельно, а последующие результаты отображались на основе результатов обоих вызовов.

Ответы

Ответ 1

function showData(data1, data2) {
    alert(data1[0].max_id);
    alert(data2[0].max_id);
}

function method1() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'ashishnjain'
        },
        dataType: 'jsonp'
    });
}

function method2() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'ashishnjain'
        },
        dataType: 'jsonp'
    });
}

$.when(method1(), method2()).then(showData);

Здесь работает jsFiddle

Ответ 2

Проблема заключается в том, что вы передаете showData() в then(), а не showData. Вы должны передать ссылку на функцию .then():

$.when(method1(), method2())
    .then(showData);

или

$.when(method1(), method2())
    .then(function () {
        showData();
    });

Изменить

Я собрал рабочую демонстрацию . Часть проблемы (по крайней мере, в фрагменте кода, который вы опубликовали) заключалась в том, что не было функции обратного вызова с именем $callback. Частью проблемы было $ в имени обратного вызова '$callback'.

Итак, удалите параметр jsonp: '$callback' ajax, так что jQuery по умолчанию использует функцию обратного вызова с именем callback, и, определит функцию с этим именем, и все это работает.

Ответ 3

Я немного изменил ваш код и упростил понимание... я не тестировал его, попробуйте

var count = 0;
function countResponse(data) {
    count++;
    if(count==2)
    {
        // Do something after getting responce from both ajax request
    }
};

var method1 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            countResponse(data)
        }
    });
};

var method2 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            countResponse(data)
        }
    });
};