jQuery. при понимании

Я пытаюсь использовать 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());

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

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

3 ответа

Решение
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

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

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

или же

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

редактировать

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

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

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

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)
        }
    });
};
Другие вопросы по тегам