如何在AngularJS中停止所有正在进行的Ajax调用?

How do I stop all ongoing Ajax calls in AngularJS

本文关键字：正在进行 Ajax 调用 AngularJS      更新时间：2023-09-26

我正在制作Ajax调用API由文本输入元素中的ng-change事件触发。

HTML: 

<input type="text" ng-model="movieTitle" ng-change="writeTitle(movieTitle)">
Javascript: 

$scope.writeTitle = function(val){
  val = val.replace(/ /g, "+");
  var ajax_url = 'http://www.omdbapi.com/?s='+val+'*';
  $http.get(ajax_url).success(function(data) {
        $scope.movies = data.Search;
  });
}

我想做的是，如果有人快速连续键入4个字符，只解析最后的Ajax调用;否则，它们有时会混淆，用户看到的是另一个呼叫的结果，而不是最后一个呼叫的结果。

那么，当一个新调用被执行而其他调用仍在队列中时，我如何停止正在进行的Ajax调用呢?

您需要延迟ng-change的发射。为此你需要使用debounce。

用法请参考以下链接:

Angular ng-change delay

这样做的方法是限制调用函数的频率，而不是通过停止进一步的ajax调用本身。

两个常见的术语是throttling或debouncing，并在此博客上有一个H/T

Throttling -强制一个函数在一段时间内可以调用的最大次数。如"每100毫秒最多执行此函数一次"。

debouting -强制函数在经过一定时间后才被调用。

您可以选择更适合您的情况，并在您的函数中实现它。

Debounce和throttling的东西是适合的。如果你想取消正在进行的请求，因为某些原因，你需要使用$http.get调用的超时参数。

相关文章：