Implementing a delay ($timeout) to a $http request with AngularJS

Question

I have a particular function dependant on a (previously executed) service that will trigger multiple queries to a 3rd party API. This API with cancel the requests if it gets too many of them too quick. Is there a way to set a delay to the $http query?

Here is my $http code:

$scope.getImages = function (title, name) {
  $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json').
   success(function(data4) {
     $scope.images = data4;
   });
}

EDIT Upon request I paste my whole JS (probably I should have done so from the start)

angular.module('myApp', ['ngResource'])

  function Ctrl($scope, $http) {
    var search = function(name) {
      if (name) {
        $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=5').
          success(function(data3) {
            $scope.clicked = false;
            $scope.results = data3.results;
          });
      }
      $scope.reset = function () {
        $scope.sliding = false;
        $scope.name = undefined;
      }
    }
    $scope.$watch('name', search, true);

    $scope.getDetails = function (id) {
      $http.get('http://api.discogs.com/artists/' + id).
        success(function(data) {
            $scope.artist = data;
        });
      $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=10').
        success(function(data2) {
            $scope.releases = data2.releases;
        });
      $scope.clicked = true;
      $scope.sliding = true;
    }


    $scope.getImages = function (title, name) {
        $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json').
          success(function(data4) {
              $scope.images = data4;
          });
      }


  };

Your $http code only shows a single call. Can you show how you're doing the multiple requests? — Jorg
– Jorg, Commented Mar 18, 2014 at 0:30

Zack Argyle · Accepted Answer · 2014-03-18 01:16:36Z

2

I assume you will want to debounce your calls somehow, something simple like this should work. It will make the call every 300ms unless search(name) is called again before it fires.

var debounce = null;

var search = function(name) {
  $timeout.cancel(debounce);

  if (name) {
    debounce = $timeout(function() {
        $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=5')
             .success(function(data3) {
                 $scope.clicked = false;
                 $scope.results = data3.results;
             });
    },300);
  }
  $scope.reset = function () {
    $scope.sliding = false;
    $scope.name = undefined;
  }
}

answered Mar 18, 2014 at 1:16

Zack Argyle

8,4674 gold badges32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implementing a delay ($timeout) to a $http request with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related