Oto wymyślony przykład tego, co się dzieje: http://jsfiddle.net/adamjford/YNGcm/20/
HTML:
<a href="#">Click me!</a>
<div></div>
JavaScript:
function getSomeDeferredStuff() {
var deferreds = [];
var i = 1;
for (i = 1; i <= 10; i++) {
var count = i;
deferreds.push(
$.post('/echo/html/', {
html: "<p>Task #" + count + " complete.",
delay: count
}).success(function(data) {
$("div").append(data);
}));
}
return deferreds;
}
$(function() {
$("a").click(function() {
var deferreds = getSomeDeferredStuff();
$.when(deferreds).done(function() {
$("div").append("<p>All done!</p>");
});
});
});
Chcę „Wszystko gotowe!” pojawiać się po zakończeniu wszystkich odroczonych zadań, ale $.when()
wydaje się, że nie wie, jak obsługiwać tablicę Odroczonych obiektów. „Wszystko gotowe!” dzieje się najpierw, ponieważ tablica nie jest obiektem odroczonym, więc jQuery idzie do przodu i zakłada, że właśnie zostało zrobione.
Wiem, że można przekazać obiekty do funkcji jak, $.when(deferred1, deferred2, ..., deferredX)
ale nie wiadomo, ile obiektów Odroczonych będzie w trakcie wykonywania w rzeczywistym problemie, który próbuję rozwiązać.
javascript
jquery
argument-passing
jquery-deferred
.when
adamjford
źródło
źródło
$.when.apply
w ogóle, aby uzyskać ten sam rezultat.Odpowiedzi:
Aby przekazać tablicę wartości do dowolnej funkcji, która normalnie oczekuje, że będą to osobne parametry, użyj
Function.prototype.apply
, więc w tym przypadku potrzebujesz:Zobacz http://jsfiddle.net/YNGcm/21/
W ES6 możesz zamiast tego użyć
...
operatora rozkładania :W obu przypadkach, ponieważ jest mało prawdopodobne, abyś wiedział z góry, ile parametrów formalnych
.then
będzie wymagał moduł obsługi, ten moduł obsługi musiałby przetworzyćarguments
tablicę, aby pobrać wynik każdej obietnicy.źródło
$.when
-f.apply(ctx, my_array)
będzie nazywaćf
sięthis == ctx
i argumenty przedstawione do treści omy_array
.$
vsnull
jako pierwszym parametrze jest wart przeczytania. W tym konkretnym przypadku nie ma to jednak znaczenia.$
jest mniej typowy niżnull
i jesteś bezpieczny, gdy$.when
zmiany implementacji (nie to, że jest to prawdopodobne w tym przypadku, ale dlaczego nie pozostawićthis
domyślnie niezmienionego).Powyższe obejścia (dzięki!) Nie rozwiązują poprawnie problemu odzyskania obiektów dostarczonych do metody odroczonej,
resolve()
ponieważ jQuery wywołujedone()
ifail()
wywołania zwrotne z indywidualnymi parametrami, a nie tablicą. Oznacza to, że musimy użyćarguments
pseudo-tablicy, aby wszystkie rozstrzygnięte / odrzucone obiekty zostały zwrócone przez tablicę odroczonych, co jest brzydkie:Ponieważ przeszliśmy przez szereg odroczonych, byłoby miło odzyskać tablicę wyników. Byłoby również miło odzyskać rzeczywistą tablicę zamiast pseudo-tablicy, abyśmy mogli użyć metod takich jak
Array.sort()
.Oto rozwiązanie zainspirowane metodą when.js ,
when.all()
która rozwiązuje te problemy:Teraz możesz po prostu przekazać tablicę odroczonych / obietnic i odzyskać tablicę rozstrzygniętych / odrzuconych obiektów w swoim wywołaniu zwrotnym:
źródło
var toArray = function (args) { return deferreds.length > 1 ? $.makeArray(args) : [args]; }
zamiastArray.prototype.slice.call
.Możesz zastosować
when
metodę do swojej tablicy:Jak pracujesz z tablicą jQuery Deferreds?
źródło
Podczas wywoływania wielu równoległych wywołań AJAX masz dwie opcje obsługi odpowiednich odpowiedzi.
Promises'
tablicy i$.when
akceptujepromise
s, a jej wywołanie zwrotne.done
jest wywoływane, gdy wszystkiepromise
s są zwracane z odpowiednimi odpowiedziami.Przykład
źródło
$.when
.for ... in
na tablicy ?!)(not recommended)
2. Nie zgadzam się -for ... in
jest w porządku, ponieważ tablica zawiera tylko te właściwości, które potrzebują (bez dodatkowych właściwości). i tak dziękiArray.prototype
. W każdym razie dla kodu niekrytycznego pod względem wydajności lepiej byłoby użyć.map
zamiast pętlifor
/push
, np.var promises = capitalCities.map(ajaxRequest); $.when.apply($, promises).then(fillCountryCapitals)
- zadanie wykonane.Jako prostą alternatywę, która nie wymaga
$.when.apply
aniarray
, możesz użyć następującego wzorca do wygenerowania pojedynczej obietnicy dla wielu równoległych obietnic:na przykład
Uwagi:
promise = promise.then(newpromise)
źródło
then()
połączeń łańcuchowych w podobny sposób. Zachowanie$.when
polega na zachowaniu się tak, jakby było równoległe (nie powiązane). Spróbuj, zanim wyrzucisz przydatną alternatywę, ponieważ działa :)Chcę zaproponować inny przy użyciu $ .each:
Możemy zadeklarować funkcję ajax w następujący sposób:
Część kodu, w której tworzymy tablicę funkcji za pomocą ajax do wysyłania:
I wywoływanie funkcji z wysyłaniem ajax:
źródło
Jeśli dokonujesz transpozycji i masz dostęp do ES6, możesz użyć składni spreadu, która konkretnie stosuje każdy iterowalny element obiektu jako dyskretny argument, dokładnie tak, jak tego
$.when()
potrzebuje.MDN Link - Składnia spreadu
źródło
Jeśli używasz angularJS lub jakiegoś wariantu biblioteki obietnic Q, masz
.all()
metodę, która rozwiązuje dokładnie ten problem.zobacz pełne API:
https://github.com/kriskowal/q/wiki/API-Reference#promiseall
https://docs.angularjs.org/api/ng/service/$q
źródło
.map
tutaj, ale no cóż).Miałem bardzo podobny przypadek, w którym publikowałem w każdej pętli, a następnie ustawiałem znaczniki HTML w niektórych polach na podstawie liczb otrzymanych z ajax. Następnie musiałem wykonać sumę (teraz zaktualizowanych) wartości tych pól i umieścić je w polu sumarycznym.
Problem polegał na tym, że próbowałem zsumować wszystkie liczby, ale nie otrzymałem jeszcze danych z wywołań asynchronicznych wywołań ajax. Musiałem ukończyć tę funkcjonalność w kilku funkcjach, aby móc ponownie użyć kodu. Moja zewnętrzna funkcja czeka na dane, zanim pójdę i zrobię coś z całkowicie zaktualizowanym DOM.
źródło