javascript - AngularJS - 即使数组中只有一项，循环也会错误地递增

Question

在我的 Angular 应用程序中，我有一段这样的代码

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)

            }
    }
}

它只是一个 for 循环，在循环内部有一个 Angular 服务来调用后端 api。该数组只有一项。因此 i 的值应始终为 0。但是 console.log(i) 在服务调用之前打印 0 并且在服务调用之后打印 1。有人能指出这里发生了什么吗。

Answer 1

传递给 .then 方法的 callback 是一个闭包，当异步调用发生时，for 循环将继续运行，计数器将继续递增。

闭包执行上下文有一个指向外部范围及其所有变量的指针，您在这里遇到的是当触发回调以及 console.log 时，循环已经完成并且 i 计数器(在执行上下文中可用)将等于数组的大小，即 1。

要在回调中保留实际计数器，您可以将服务调用包装在一个立即调用的函数(创建一个隔离范围)中，将实际计数器作为参数传递。

(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)