Question

我正在对文本输入元素中的ng-change事件触发的 API 进行 Ajax 调用。

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呼叫呢？

Answer 1

您需要延迟点击ng-change。为此，您需要使用debounce。

有关其用途，请参阅以下链接：

Angular ng-change delay

Answer 2

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

2个常用字词为throttling或debouncing，而H / T为this blog

限制 - 强制执行函数随时间调用的最大次数。如“每100毫秒最多执行一次此函数。”

Debouncing - 强制执行一个函数，直到一段时间没有被调用，才会再次调用。如同“只有在没有被调用的情况下经过100毫秒才执行此函数。

您可以选择更适合您情况的方式，并在您的功能中实施。

Answer 3

Debounce和throttling事情适用于此。如果您因某些原因要取消正在进行的请求，则需要使用$http.get <form action="login" method="POST"> <div class="row"> <div class="col-md-2">Username:</div> <div class="col-md-4 input-group input-group-sm"> <span class="input-group-addon" id="important"> <span class="glyphicon glyphicon-play" /> <input class="form-control" type="text" name="username" id="username" aria-describedby="important" /> </span> </div> </div> <div class="row"> <div class="col-md-2">Passwort:</div> <div class="col-md-4 input-group input-group-sm"> <span class="input-group-addon" id="important"> <span class="glyphicon glyphicon-play" /> <input class="form-control" type="password" name="password" id="password" aria-describedby="important" /> </span> </div> </div> <div class="row"> <div class="col-md-2 input-group-sm"> <input type="submit" class="form-control btn-default" value="Login" /> </div> </div> </form> <form action="reset" method="POST"> <div class="row"> <div class="col-md-2 input-group-sm"> <input class="form-control btn-default" type="submit" value="Passwort vergessen" /> </div> </div> </form>来电。{/ p>

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

3 个答案: