打破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();
            });
        }
    }
};