Ich habe ein Array, das ich durchschleifen und senden Sie einen Ajax-Aufruf mit. Allerdings möchte ich es seriell geschehen lassen (das nächste nach dem vorherigen wurde erfolgreich durchgeführt). Wie gehe ich effizient vor?jQuery Versprechen Iteration
$($('.logitem').get()).each(function(i,item) {
$.ajax({
type: "POST",
url: 'http://localhost/save.php',
data: {myData: $(item).html()}
});
});
In Ordnung, ich weiß nicht, wie effizient diese Lösung wirklich ist, aber es scheint von meinen Tests zu funktionieren.
Die Hauptidee besteht darin, einen Generator zu verwenden, um über Ihre Liste der Elemente zu iterieren. Sie erhalten den Iterator einmal mit .next() gestartet und Sie rufen auch .next() von der vollständigen callback Ihrer Ajax-Anfrage.
$(document).ready(function() {
function request(item) {
$.ajax({
type: "POST",
url: 'http://httpbin.org/post',
data: { myData: $(item).html() },
complete: function() {
//Simulate delay in the call, remove the setTimeout in your code
setTimeout(function() {
//Once this call completes, call the next one
console.log('Call completed for item : ' + $(item).text());
iterator.next();
}, 1000);
}
});
}
function* ajaxGenerator(items) {
for (let i = 0; i < items.length; i++) {
yield request(items[i]);
}
}
var logItems = $('.logitem').get();
var iterator = ajaxGenerator(logItems);
//Get things started
iterator.next();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<div class="logitem">Item1</div>
<div class="logitem">Item2</div>
<div class="logitem">Item3</div>
</body>
</html>
Nur um sicherzugehen, sollten Sie Ihren Ajax-Request nur geschehen, wenn die vorherige Ajax-Anforderung erfolgreich abgeschlossen? –
Korrekt .............. – KingKongFrog
Auf welche Javascript-Version zielen Sie? ES6 ok? –