AngularJS와 - 잘못 증가 루프 전용 배열의 한 항목 내 각 응용 프로그램에서

Question

있는 경우에도, 난 그냥 측면에서 루프가 for loop이

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) 

      } 
    } 
} 

그것과 같은 코드의 조각을 백엔드 API를 호출하는 각도 서비스. 배열에는 하나의 항목 만 있습니다. 따라서 i의 값은 항상 0이 될 것으로 예상됩니다. 그러나 0 인쇄 서비스 호출 전에 console.log(i)은 서비스 호출 후 1을 인쇄합니다. 어떤 사람이 여기서 일어나는 일을 지적 할 수 있습니까?

Answer 1

.then 메서드에 전달한 callback은 클로저입니다. 비동기 호출이 발생하고 카운터가 계속 증가하면 for 루프가 계속 진행됩니다.

클로저 실행 컨텍스트는 바깥 쪽 범위와 모든 변수에 대한 포인터를 가지고 있습니다. 여기에서 겪고있는 것은 콜백이 실행되고 console.log 루프가 이미 완료되었고 i 카운터 (실행 컨텍스트)는 배열의 크기와 같습니다.

콜백의 실제 카운터를 유지하여 실제 호출을 전달하는 immediatly 호출 된 함수 (격리 된 범위 생성) 내에서 서비스 호출을 래핑 할 수 있습니다. 카운터를 인수로 사용하십시오. (ReadMore) let이 문제를 해결할 것입니다, var by let 교체, 그림으로 온 이유

(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

그것은 폐쇄의 문제입니다, 즉이다. 또는 당신은 당신의 전화, 같이 동봉 해 ECMA6를 사용하지 않는 경우 특정 문제가

여기

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

입니다 section in above link

See also this Fiddle

나는이 루프에 대한 JS의 성격 때문이라고 생각