突破ajax循环

Question

我有一个函数，如果项目，然后为每个项目，它会使ajax调用外部api，通过列表循环。

这一切工作都很好，都在一个循环和单独调用它。但我想要做的是给用户随时取消请求的选项。当清单很小时（约为< 20），这个过程在2-3秒内完成，这很好。但有时列表可能有几百个，可能需要几分钟才能运行，我想让用户随时选择取消此选项。

这是我的时刻：

<button type="button" class="btn btn-default" ng-click="getData(myList)">Get All Data</button> 
<button type="button" class="btn btn-default" ng-click="cancelProcessCalls()">Get All Data</button> 

<div ng-repeat="item in myList"> 
    <div> 
     <div>{{item.Id}}</div> 
     <div>{{item.Name}}</div> 
     <div> 
      <span ng-bind-html="item.statusText"></span> 
      <span ng-bind="item.Data"></span> 
     </div> 
    </div> 
</div> 

角/ jQuery代码是：

$scope.getData = function (itemList) { 
    if (itemList != null) { 
     $.each(itemList, function (index, item) { 
      $scope.getItemData(item); 
     }); 
    } 
}; 

$scope.cancelProcessCalls = function() { 
    $scope.processCalls=false; 
}; 

$scope.getItemData = function (item) { 
    if ($scope.processCalls) { 
     if (item != null) { 
      item.statusText = "Getting data..."; 

      $.ajax({ 
       url: _url + item.Id, 
       method: 'GET' 
      }) 
      .fail(function (data, textStatus, jqXHR) { 
       $scope.handleError(data, textStatus, jqXHR); 
      }) 
      .done(function (data) { 
       item.Data = data; 
      }) 
      .then(function (data, textStatus, jqXHR) { 
      }) 
      .always(function (data, textStatus, jqXHR) { 
       item.statusText = null; 
       $scope.$apply(); 
      }); 
     } 
    } 
}; 

所以第一个函数只是循环通过列表和使呼叫每个项目。

我已经尝试添加一个变量，检查是否继续调用，但不工作，因为它全部包装在工作范围内。

是否有一种简单的方法可以优雅地取消或跳出该循环？

Answer 1

像这样的东西应该工作。这个想法是，你将xhr对象存储在一个数组中，然后当你想取消你循环的数组并在请求中调用abort。

$scope.requests = []; 

    $scope.getData = function(itemList) { 
    $scope.cancelProcessCalls(); 
    if (itemList != null) { 
     $.each(itemList, function(index, item) { 
     $scope.getItemData(item); 
     }); 
    } 
    }; 

    $scope.cancelProcessCalls = function() { 
    for (var i = 0; i < $scope.requests.length; i++) { 
     $scope.requests[i].abort(); 
    } 

    $scope.requests.length = 0; 
    }; 

    $scope.getItemData = function(item) { 
    if ($scope.processCalls) { 
     if (item != null) { 
     item.statusText = "Getting data..."; 

     var xhr = $.ajax({ 
      url: _url + item.Id, 
      method: 'GET' 
     }); 
     $scope.requests.push(xhr); 

     xhr.fail(function(data, textStatus, jqXHR) { 
      $scope.handleError(data, textStatus, jqXHR); 
      }) 
      .done(function(data) { 
      item.Data = data; 
      }) 
      .then(function(data, textStatus, jqXHR) {}) 
      .always(function(data, textStatus, jqXHR) { 
      item.statusText = null; 
      $scope.$apply(); 
      });); 
    } 
    } 

Answer 2

$scope.breakCheck = false; 
$scope.getData = function (itemList) { 
    if (itemList != null) { 
     $.each(itemList, function (index, item) { 
      if ($scope.breakCheck) { 
       return; 
      } 
      $scope.getItemData(item, $scope); 
     }); 
    } 
}; 

$scope.cancelProcessCalls = function() { 
    $scope.processCalls=false; 
}; 

$scope.getItemData = function (item, scope) { 
    scope.breakCheck = true; // You can move this line anywhere to decide when you want to stop the ajax 
    if ($scope.processCalls) { 
     if (item != null) { 
      item.statusText = "Getting data..."; 

      $.ajax({ 
       url: _url + item.Id, 
       method: 'GET' 
      }) 
      .fail(function (data, textStatus, jqXHR) { 
       $scope.handleError(data, textStatus, jqXHR); 
      }) 
      .done(function (data) { 
       item.Data = data; 
      }) 
      .then(function (data, textStatus, jqXHR) { 
      }) 
      .always(function (data, textStatus, jqXHR) { 
       item.statusText = null; 
       $scope.$apply(); 
      }); 
     } 
    } 
};