打破ajax循環

Question

我有一個函數，如果有項目，則循環遍歷列表，然后為每個項目對外部api進行ajax調用。

所有這些都可以正常工作，無論是循環調用還是單獨調用。 但是我要做的是讓用戶可以隨時取消請求。 當列表較小（大約<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();
            });
        }
    }
};