在角度js中处理多个Ajax调用搜索功能

Question

我已经为我的角度js应用程序实现了自定义搜索功能。

为此，我调用了一个Ajax请求来获取数据。 这个调用发生在change事件上，这就是为什么它会多次调用我的Ajax。

请建议，因为我是新的角js。

Answer 1

您可以考虑延迟（空闲时间）。假设我在搜索文本框中输入如果我空闲了200ms，400ms或任何你想要的时间，你可以调用一个AJAX请求。

如果我输入salman，它会调用6次API。但假设我们会有空闲时间。我们将在用户空闲时调用该特定时间。

要实现它的角度，你可以使用。 $ watch或bootstrap指令

Answer 2

所以你最好的选择是给自己一点点延迟。正如阿卡什指出的，你必须选择你认为可以接受的延迟时间。您还需要确保请求仅在延迟之后进行。

下面是做到这一点的一种方法：

//In your controller 
var _timeout; 

$scope.fetchSearchResults = function(){ 

    //We will clear the previous timeout because a key has been pressed 
    clearTimeout(_timeout); 

    //Set the timeout - if no key is pressed, it will execute. Else the line above will clear it. 
    _timeout = setTimeout(function(){ 
     var keyword = $scope.searchKeyword.name; 
     //Do your AJAX request here 


     //We have delayed the request by 400ms - but you can change it as you please. 
    }, 400); 
} 

你的HTML：

<!-- Then in your HTML something similar to: --> 
<input ng-model="searchKeyword.name" ng-keyup="fetchSearchResults()" /> 

编辑：

如果你想要去的 '纯' 的角度来说，你'd是这样做的：

//In your controller 
//NOTE: make sure you've injected $timeout into your controller 
var _timeout; 

$scope.fetchSearchResults = function(){ 

    //We will clear the previous timeout because a key has been pressed 
    $timeout.cancel(_timeout); 

    //Set the timeout - if no key is pressed, it will execute. Else the line above will clear it. 
    _timeout = $timeout(function(){ 
     var keyword = $scope.searchKeyword.name; 
     //Do your AJAX request here 


     //We have delayed the request by 400ms - but you can change it as you please. 
    }, 400); 
} 

Answer 3

我绝对推荐@ jeanpaul的“debouncing”的答案。

除此之外，当您有多个并发AJAX请求的潜力并且您想要处理最近的请求时，可能需要验证它在响应处理程序中的哪个请求。 （即前一个请求花费的时间比以后的一个回应）时的响应并不总是进来，他们被要求以相同的顺序

一个解决这种方式，这一点尤其重要的是一样的东西：

var activeRequest; 
function doRequest(params){ 
    // reqId is the id for the request being made in this function call 
    var reqId = angular.toJson(params); // I usually md5 hash this 

    // activeRequest will always be the last reqId sent out 
    activeRequest = reqId; 

    $http.get('/api/something', {data: params}) 
     .then(function(res){ 
      if(activeRequest == reqId){ 
       // this is the response for last request 
      } 
      else { 
       // response from previous request (typically gets ignored) 
      } 
     }); 
} 

Answer 4

您已经接受了答案，但我想与您分享一些代码。

myapp.factory('formService', ['$http', '$filter', '$q', '$timeout', function ($http, $filter, $q, $timeout) { 
    var service = {}; 
    service.delayPromise = null; 
    service.canceler = null; 
    service.processForm = function (url, formData, delay) { 
     if (service.delayPromise) 
      $timeout.cancel(service.delayPromise); 
     if (service.canceler) 
      service.canceler.resolve(); 
     service.canceler = $q.defer(); 
     service.delayPromise = $timeout(function (service) { 
      return service; 
     }, delay, true, service); 
     return service.delayPromise.then(function (service) { 
      service.delayPromise = null; 
      return $http({ 
       method : 'POST', 
       url  : url, 
       timeout : service.canceler.promise, 
       data : formData 
      }); 
     }) 
    } 
    return service; 
]); 

这是做什么的。它提供了formService具有processForm函数，接受url,formData和delay。

processForm功能延迟提交$timeout服务。如果已经存在延迟或正在提交，它只是取消它。

并在你的控制器。

myapp.controller('myCtrl', ['formService', function (formService) { 
    $scope.formData = {}; 
    $scope.pageData = {}; 
    $scope.$watchCollection('formData', function (formData, oldData, scope) { 
     if (!angular.equals(formData, oldData)) { 
     var event; 
     formService.processForm(formData, event, 500).then(function (response) { 
      if (response.data instanceof Object) 
      angular.copy(response.data, scope.pageData); 
     }); 
     } 
    }); 
}]);