I would like to fire a function after the input has been complete

Question

I would like to fire a function after the input has been complete.The debounce function doesn't works for me.I don't want it on focus out I wish to have fewer hits on a function which is fired on keypress.

plnkr.co/edit/uDgRNnVh0NUm4z2BbzSj?p=preview

Link the plnkr in your question. When do you want the function to be called exactly? I guess I do not understand *fewer hits*. — Pierre C., Mar 15 '16 at 08:29
I want the function to be called once the input text is received.So it might wait for a sec before calling the function. — antish Gajwani, Mar 15 '16 at 08:42

score 0 · Answer 1 · answered Mar 10 '16 at 10:25

0

In the Angular world this is accomplished using ng-blur. Like so:

<input type="text" ng-blur="foo()">

answered Mar 10 '16 at 10:25

Katana24

8,706
19
76
118

score 0 · Accepted Answer · edited May 23 '17 at 12:07

With the help of this answer, I got it working as (I hope) you expect.

http://plnkr.co/edit/f9RaRXjhWZGbTVn0JRno?p=preview

HTML

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
        <script data-require="angular.js@*" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-    min.js"></script>
        <script src="script.js"></script>
    </head>
    <body ng-controller="mainCtrl" class="container">
      <div class="panel panel-primary well">
            Input:
            <input type="text" ng-model="inputText" />

        </div>
        {{finalText}}
    </body>
</html>

JS

angular.module('app', []);

angular.module('app').controller('mainCtrl', function($scope) {
 $scope.inputText = "";
 $scope.$watch("inputText", _.debounce(function (text) {
   $scope.$apply(function(){
        $scope.finalText = text;
   });
 }, 1000));
});

score 0 · Answer 3 · answered Apr 15 '16 at 09:48

var timeout,wait,waitTimeout;

function customDebounce() {
    var dfd = $q.defer(),
     if(!wait) {
    FunctionCall().then(function(response){
      dfd.resolve(response);
    });
    wait = true;
    waitTimeout = $timeout( function(){wait = false;}, 1000);
  }
  else {
    $timeout.cancel(timeout);
    $timeout.cancel(waitTimeout);
    timeout = $timeout( function(){
      wait = false;
      FunctionCall().then(function(response){
      dfd.resolve(response);
    });
    }, 1000);
  }

  return dfd.promise;
}

I would like to fire a function after the input has been complete

3 Answers3