AngularJS - For-Schleife falsch sogar erhöht wird, wenn nur ein Element im Array ist

Question

In meinem Winkel Anwendung habe ich ein Stück Code wie folgt

for (var i = 0; i < $scope.itemList.length; i++) { 
    if ($scope.itemList[i].serialNumber == quickCode) { 
     console.log(i) 
     returnsService.getNoReceiptErrorMessages($scope.itemList[i].sku, quickCode).then(function (response) { 
      console.log(i) 

      } 
    } 
} 

Es ist nur ein for loop und in Seite der Schleife gibt es ein winkliger Dienst, um Backend-API aufzurufen. Das Array hat nur ein Element. Der Wert von i wird also immer 0 sein. Aber die console.log(i) vor dem Serviceanruf Drucken 0 und nach Service-Aufruf druckt 1. Kann jemand darauf hinweisen, was hier passiert?

Answer 1

Die callback, die Sie an die .then-Methode übergeben, ist eine Schließung, die for-Schleife wird weitergehen, wenn der asynchrone Aufruf geschieht und der Zähler wird weiter inkrementieren.

Ein Abschluss Ausführungskontext hat einen Zeiger auf den äußeren Bereich und alle seine Variablen, was Sie hier erfahren, ist, wenn der Rückruf ausgelöst wird, sowie die console.log die Schleife bereits abgeschlossen ist und der i-Zähler (verfügbar in der Ausführungskontext) ist gleich der Größe des Arrays, das 1 ist.

Um den tatsächlichen Zähler im Rückruf zu halten, könnten Sie den Serviceaufruf in eine sofort aufgerufene Funktion (die einen isolierten Bereich erstellt) umbrechen und den eigentlichen übergeben Zähler als Argument.

(function(count){ 
    //here i will be detached scoped to this function 
    returnsService.getNoReceiptErrorMessages($scope.itemList[count].sku, 
    quickCode).then(function (response) { 
    console.log(count) 
    } 
})(i) 

Answer 2

Es ist Problem der Schließung, deshalb let (ReadMore) ins Bild kam, ersetzen var by let, wird Ihr Problem lösen. oder Wenn Sie sich nicht mit ECMA6 dann Ihren Anruf einschließen, wie:

(function(variable){ 
    // variable scope remain intact here 
})(variable) 

Hier ist Ihr Problem spezifisch section in above link

See also this Fiddle