So rufen Sie eine Ajax-Funktion in einer for-Schleife

Question

Ich bin neu in Ajax und JavaScript. Was versucht wird ist, eine Ajax-Funktion mehrmals aufzurufen, um bestimmte Daten von einer Ressource abzurufen und dann alle Daten in ein Array zu pushen, damit ich sie später im Code verwenden kann. Hier ist mein Code.

var arr = []; 
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 

for (i = 0; i < users.length; i++) { 
    $.ajax({ 
     url: "https://api.twitch.tv/kraken/streams/" + users[i], 
     success: function(data) { 
      arr.push(data); 
     }, 
     error: function(data) { 
      arr.push("blank"); 
     }, 
     complete: function() { 
      if (i == users.length) { 
       console.log(arr); //This seem to print even when the condition isn't true 
      } 
     } 
    }); 
} 

Das Problem mit dem Code ist, dass es auf der Konsole ausgibt, selbst wenn i-users.length

Meine Frage ist nicht gleich ist; Wie stelle ich sicher, dass es wartet, bis i == users.length wahr ist, bevor es auf der Konsole druckt? Bitte beachten Sie, dass ich immer noch möchte, dass der Prozess asynchron ist.

Answer 1

Hier ist, wie Sie alle Anfragen rufen können ihren Erfolg unter Berücksichtigung, ohne eine Anfrage über ein anderes ausgeführt wird:

var arr = []; 
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 

var runRequests = function(userIndex) { 
    if (users.length == userIndex) { 
    console.log("runRequests Success", arr); 
    return; 
    } 

    var user = users[userIndex]; 

    $.ajax({ 
    url: "https://api.twitch.tv/kraken/streams/" + user, 
    success: function(data) { 
     arr.push(data); 
    }, 
    error: function() { 
     arr.push({}); 
     console.error("runRequests Error", "user", arguments); 
    }, 
    complete: function() { 
     runRequests(++userIndex); 
    } 
    }); 
}; 

runRequests(0); 

Working demo

Answer 2

können Sie versuchen, von Ajax mit Asynchron falschen Aufruf wie unten

$.ajax({ 
     type: "GET", 
     url: remote_url, 
     async: false, 
     success : function(data) { 
      remote = data; 
     } 
    }); 

Answer 3

einen Verschluss indise der Schleife verwenden und banden es mit i

var arr = []; 
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 

for (i = 0; i < users.length; i++) { 
(function(x){ 
$.ajax({ 
    url: "https://api.twitch.tv/kraken/streams/" + users[x], 
    success: function(data) { 
     arr.push(data); 
    }, 
    error: function(data) { 
     arr.push("blank"); 
    }, 
    complete: function() { 
     if (i == users.length) { 
     console.log(arr); //This seem to print even when the condition isn't true 
     } 
    } 
    }); 
})(i) 
} 

Answer 4

Können Sie unten Code versuchen:

var arr = []; 
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 
var currentIndex = 0; 
PerformAjax(arr, users, currentIndex); 

function PerformAjax(arr, users, currentIndex) 
{ 
    $.ajax({ 
     url: "https://api.twitch.tv/kraken/streams/" + users[currentIndex], 
     success: function(data) { 
      arr.push(data); 
     }, 
     error: function(data) { 
      arr.push("blank"); 
     }, 
     complete: function() { 
      currentIndex++; 
      if (currentIndex == users.length) { 
       console.log(arr); //This seem to print even when the condition isn't true 
      } 
      else 
      { 
       PerformAjax(arr,users,currentIndex); 
      } 
     } 
    }); 
} 

Answer 5

Dies geschieht aufgrund der asynchronen Natur. Zu dem Zeitpunkt, zu dem die Ajax-Callbacks aufgerufen werden, ist i == user.length bereits wahr. Aber in Ihrem Fall können Sie einfach ändern:

if (i == users.length) { 

zu:

if (arr.length == users.length) { 

Dies wird auch schön funktionieren, wenn die Rückrufe in der gleichen Reihenfolge nicht ausgeführt werden, wie Sie die AJAX-Anfragen ausgelöst.

Answer 6

Am einfachsten ist es, einen Verschluss zu verwenden. Wann immer Sie etwas asynchron in einer Schleife haben, ist es dasselbe.

In diesem Pseudocode-Snippet erfasst die innere Funktion den von i referenzierten Speicherort. Die Schleife wird ausgeführt, der i-Wert wird auf seinen endgültigen Wert erhöht, und dann werden die asynchronen Callbacks aufgerufen, die alle genau die gleiche Position (nicht den Wert) suchen.

Die allgemeine Lösung ist folgende:

for (var i .....) { 
    (function (i) { 
    async(function() { 
     use(i); 
    }); 
    })(i); 
} 

das heißt den gesamten Inhalt der Schleife in einer selbstausführende Funktion umwickeln.

Hier wird der Wert von äußeren i in die selbstaufrufende anonyme Wrapping-Funktion übergeben; Der Standort dieses eindeutigen Werts wird vom asynchronen Rückruf erfasst. Auf diese Weise erhält jedes Async seinen eigenen Wert, der in dem Moment bestimmt wird, in dem die selbstausführende Funktion aufgerufen wird.

Answer 7

Versuchen Sie unter Code es funktioniert gut.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
var arr = []; 
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2","cretetion","freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 

for (i = 0; i < users.length; i++) { 
$.ajax({ 
    url: "https://api.twitch.tv/kraken/streams/" + users[i], 
    async: false, 
    success: function(data) { 
    arr.push(data); 
    }, 
    error: function(data) { 
    arr.push("blank"); 
    }, 
    complete: function() { 

    if (i == (users.length-1)) { 
     console.log(i+'---x--'+users.length); //This seem to print even when the condition isn't true 

    } 
    } 
}); 
} 
</script> 

---

Bitte Schauen Sie unten Code wihout Schleife haben und asyns: false, getestet fein arbeiten.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
var arr = []; 
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2","cretetion","freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 
var i = 0; 
var getUserData = function(arrUsers) { 
    if(i<=arrUsers.length && arrUsers[i] != undefined){ 
    console.log(arrUsers[i]); 
     $.ajax({ 
      url: "https://api.twitch.tv/kraken/streams/" + arrUsers[i][i], 
      async: false, 
      success: function(data) { 
      arr.push(data); 
      }, 
      error: function(data) { 
      arr.push("blank"); 
      } 
     }); 
    i ++; 
    getUserData(users); 
    }else{ 
    console.log(arr); 
    } 
} 

getUserData(users); 
</script>