Call Function with Delay When Textbox Changes in AngularJS

Question

Can't seem to google up an example of how this is done.

I have successfully created a textbox that calls a function every time it changes. What I would like to do is only call the function when the user has stopped typing for x milliseconds.

I know how to do it in JQuery using the keyup event, and can probably make it work this way, but want to do it "the Angular Way".

Edit

Maybe it wasn't clear from the tag or text, but I am using AngularJS, and want to use correct methodology for that framework to create this delay functionality.

Reza · Accepted Answer · 2014-12-31 15:23:49Z

28

There is ng-model-options for this manner

<input id="delayedModel" ng-model="delayedModel" ng-change="callDelayed()" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" />

the callDelayed method only calls after 500 ms from typing the last char or on blur

Here is the documentation https://docs.angularjs.org/api/ng/directive/ngModelOptions

answered Dec 31, 2014 at 15:23

Reza

20.1k18 gold badges102 silver badges178 bronze badges

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

1 Comment

Saksham Over a year ago

Solved it in an instant. Should be the accepted answer

charlietfl · Accepted Answer · 2013-03-30 21:09:29Z

22

For angular approach can inject $timeout in controller as dependency and use $watch on scope variable you've assigned in ng-model.

var timer=false;
$scope.ModelName='foo';
$scope.$watch('ModelName', function(){
  if(timer){
      $timeout.cancel(timer)
  }  
  timer= $timeout(function(){
      /* run code*/
   },delay)
});

answered Mar 30, 2013 at 21:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

5 Comments

Phil Sandler Over a year ago

Thanks! I already had the watch bit and was injecting $timeout into my controller (but had no idea how to use it), so that fixed it in 30 seconds flat.

charlietfl Over a year ago

$timeout returns a promise... I had to look that part up in docs to figure out how to use cancel().

Vural Over a year ago

What happens if you dont cancel? Because its setTimeout not setInterval?

charlietfl Over a year ago

@Vury certainly need to cancel promise but not sure if timer=$timeout(... wouldn't do automatic cancel or not. Docs do say that cancel will trigger promise reject

tobias-kutter Over a year ago

I suggest to initialize the timer var to null instead of false. My IDE throws a warning with a boolean.

PrimosK · Accepted Answer · 2014-12-02 17:47:49Z

While @charlietfl provided totally acceptable answer I would like to share with you another approach without using $watch method:

Template:

<input id="delayedModel" ng-model="delayedModel" ng-change="callDelayed()"/>

Controller:

    (function (timer, delay) {
        $scope.callDelayed= function () {
            if(timer){
                $timeout.cancel(timer)
            }
            timer = $timeout(function(){

                /* run code*/

            }, delay)
        };
    })(false, 500);

Maybe it's worth to point out why self-executing anonymous function is used. The main reason is to not pollute controller scope with time and delay variables. In this case they are defined in local function scope.

[UPDATE]

I've also found an interesting AngularJS project called angular-debounce that makes it really easy to achieve same effect. Using debounce directive it's possible to dealy model update like this:

<input type="text" ng-model="delayedModel" debounce="500"></input>

Collectives™ on Stack Overflow

Call Function with Delay When Textbox Changes in AngularJS

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related