Ajax in Verbindung mit Each

html.de-Forum JavaScript
1

Guten Morgen,

bei meiner Seite: https://lolrift.com/Summoner/EUW/Dreister%20Dachs#Spielverlauf laden derzeit 10 Einträge via Ajax nach.
Das unschöne: Die Einträge laden ohne Reihenfolge nach… Also es kann sein das der 8. Eintrag zuerst angezeigt wird, aber auch das der 3. oder 1. als erstes angezeigt wird… das macht das ganze ein wenig unschön.

nun habe ich folgenden JQuery Code:

[CODE]var games = $(‚.match-history‘).children();

$.each(games, function (index, element) {
    requestGameData(element);
});

requestGameData = function (element) {
$.get(‚{{ path(‚ajax_get‘) }}‘, {
‚class‘: ‚@lolrift:Match‘,
‚fnc‘: ‚getMatchData‘,
‚params‘: {
‚matchId‘: $(element).attr(‚data-matchid‘),
‚region‘: ‚{{ search.region }}‘,
‚currentPlayer‘: ‚{{ summoner.id }}‘
},
}).done(function (data) {
insertGameData(element, data);
});
}[/CODE]

Ich weiß es gibt den parameter „async“ aber ich möchte das die Einträge einzelnd nachladen und angezeigt wurden sobald sie geladen wurden. Aber ich möchte halt auch, das dies von oben nach unten geschieht und nicht nach einer zufälligen reihenfolge.

Ich möchte also Quasi im each irgendwie festlegen, das dass each erst weiter macht, wenn von der Funktion „requestGameData“ ein return true kommt.
Da ich aber das Problem das ich bei einem $.get / $.ajax / $.post kein returnwert im .done() hinterlegen kann und ich dann nicht wüsste wie ich beim each festlege, das er eine Pause machen soll, bis der entsprechende Returnwert ankommt.

MfG

2

Leider gerade keine Zeit für eine Erklärung…

[CODE]var queue = ;
queue.push({url: ‚…‘});
queue.push({url: ‚…‘});
queue.push({url: ‚…‘});

function processQueue () {
var itemToLoad = queue.shift();

if(!itemToLoad) return false;

$.get(itemToLoad.url, {...}).done(function () {
    processQueue();
});

}

processQueue();[/CODE]

Gibt eigentlich eh nichts zu erklären.
Die zu ladenden Elemente werden in ein array gepackt und nacheinander geladen.

Zusätzlich könnte man noch im Fehlerfall den Ladevorgang nochmal starten:

$.get(itemToLoad.url, {...}).done(function () { processQueue(); }).fail(function () { queue.unshift(itemToLoad); processQueue(); });

3

Ja :slight_smile: Danke, hab ich mir schon fast gedacht. Hatte sowas ähnliches im Kopf, aber ohne die Funktion nochmals aufzurufen, meine Variante hätte auch nicht geklappt… Aber eigentlich hätte man selbst drauf kommen können …

Wie gesagt, danke werde ich wohl so umsetzen.