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