title: Prevent multiple ajax requests onclick
body: <p>I've an issue with multiple ajax requests. For example I've a form with a button, and <code>onclick</code> it runs a service which essentially load list of items in a table; for now it should load a single item into a table when I hit the button. </p>
  
  <p>However, when I hit the button multiple times, the same item is duplicated when its loaded. </p>
  
  <p>How can I prevent while there is still no callback from the first one? </p>
  
  <h2>current ng service</h2>
  
  <pre><code>var getItems = function () {
  
      var def = $q.defer();
  
      Items.get().then(function (items) {
         def.resolve(items);
      }, function (err) {
         ...
      });
  };
  </code></pre>
  
  <p>Not sure if this is a solution, but when I write above code like this:</p>
  
  <pre><code>var def = false;
  var getItems = function () {
  
      def = $q.defer();
  
      Items.get().then(function (items) {
         def.resolve(items);
      }, function (err) {
         ...
      });
  };
  </code></pre>
  
  <p>This stops the duplication when I initialize the <code>def = false</code>, not sure if this is the correct approach by resetting the previous/old request to <code>false</code>?</p>