AngularJS - cancel previous $resource $promises if there is a new request -

I have a form with 2 fields: username and password.
When changing my username model, I make a request for the API to do some investigation.

When I separate X calls into a factory by T milliseconds, then I would like to know that:

• In my controller, done by the last receiving user Be consistent with the final input.
• The last promises will be canceled.

  I tried to find a way to emulate delays on my API call (because I am working locally and every response is immediate) but only for service Examples can be found.

  Here's a JSFDial to highlight this issue:
  

  HTML

    & lt; Div ng-app = "myApp" & gt; & Lt; Form ng-controller = "loginCtrl" & gt; Username: {{User Name}} & lt; Br> Password: {{password}} & lt; Br> & Lt; Input name = "user name" placeholder = "enter your username" type = "text" ng-model = "user name" ng-change = "check user name ()" & gt; & Lt; Input name = "password" placeholder = "enter your password" type = "password" ng-model = "password" & gt; & Lt; / Form & gt; & Lt; / Div & gt;   
   app  
    var myApp = angular.module ('myApp', ['ngResource']); / * * PRE-LOGIN * * / myApp.factory ('preLogin', ['$ resource', function ($ resource, constant) {// Check that the username comes back to the $ resource ('/ api / prelogin' {}, {Post: {method: 'POST'}});}]); / * * Login Controller * * * / myApp.controller ('loginCtrl', ['$ scope', 'preologue', function ($ radius, preogin) {$ scope.username = '; $ scope.password =' ​​' ; // Check something on username ... $ scope.checkUsername = function () {console.log ('prelogin ...', $ scope.username); preLogin.post ({username: $ scope.username }). $ Commitment then (function (data) {// success console.log (data);}, function (error) {// error console.log (error);});}}]);   
   Thanks!   
   
    
    myApp.factory ('preLogin', ['$ Resource ',' $ q ', function ($ resource, $ cue) {var cancellation = $ q.defer (); var cancels = function (revoked); (revoked; revolving); canceling = $ q.defer (); }; // Check that a username exists / // Create a resource // (We will have to do this again every time because this is the only way to renew the promise) var initRes = function () {Cancel} $ Return resource ('/ api / prelogin', {}, {post: {method: 'POST', timeout: cancellator.promis}});} Mr. {initRes: InitRes, cancelRes: Cancel}}}]);   
   It is  roughly  how you can cancel past requests.  
   However, to keep in mind that even if you have canceled the connection installed it will be executed by the server, in which case server will flood with unsuccessful requests and this is not a good practice is.  
   In your case maybe using a timeout of 0.5 seconds will reduce unnecessary calls on the server. Much like this:  
    
    myApp.controller ('loginCtrl', ['$ scope', 'preologin', '$ timeout', function ($ scope) ), Preologin, $ timeout) {var timer = false; $ Scope.username = ''; $ Scope.password = ''; // Check on some user names ... $ scope.checkUsername = function () {console log ('prelagin ...', $ scope.user); If (timer) {$ timeout.cancel (timer)}} timer = $ timeout (function () {preLogin.initRes () .post ({user name: $$. Promise. then (work (data) {// success Console log (data);}, function (error) {// error console.log (error);});}, 500);}}]);