javascript - 跳出ajax循环

Question

我有一个函数，它循环遍历列表 if items，然后针对每个项目对外部 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>

Angular/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();
          }););
    }
  }