AngularJS - Fire $timeout event on ng-change only once

Question

I have an ng-change on an input field in html that's bound to a scope variable.

<input type="text" ng-model="test" ng-change="change()" required>

var change = function(){ redraw_graph()}

Now when I change the input box, it redraws the graph for every new character I write. I want to have a delay (N seconds), so angular will wait before the user is done typing before the ng-change event fires. And if there are multiple ng-change events fired, it cancels the earlier ones and only executes the latest ones.

I've incorporated the delay with a timeout, but after N seconds the ng-change event still fires more than once. I've solved this problem before, but I can't figure out how to do it currently.

Cancel the existing $timeout before invoking a new one.

Blackhole
– Blackhole

2014-10-09 19:30:11 +00:00
Commented Oct 9, 2014 at 19:30 — Blackhole
– Blackhole, Commented Oct 9, 2014 at 19:30

Rohan Büchner · Accepted Answer · 2016-11-24 06:23:12Z

To me it seems like what you're asking for is already built into AngularJS. Thus, if you make use of the the ngModelOptions directive you can use the debounce property:

ng-model-options="{ debounce: 1000 }"

To quote the docs

.."/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place."

Working sample

  angular.module('optionsExample', [])
    .controller('ExampleController', ['$scope',
      function($scope) {
        $scope.user = {
          name: 'say'
        };
      }
  ]);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-ngModelOptions-directive-debounce-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="optionsExample">
  <div ng-controller="ExampleController">
    <form name="userForm">
      Name:
      <input type="text" 
             name="userName" 
             ng-model="user.name" 
             ng-model-options="{ debounce: 1000 }" />
      <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button>
      <br />
    </form>
    <pre>user.name = <span ng-bind="user.name"></span></pre>
  </div>
</body>

</html>

Angad · Accepted Answer · 2014-10-09 20:39:19Z

2

Based on @Blackhole's suggestion, you can work this out by cancelling your original $timeout.

Here is how you would do it:

var timer;

$scope.change = function(){
   $timeout.cancel( timer );

   timer = $timeout(function() {
             redraw_graph()
           },2000);
 }

Check below plunker to see how it works. An alert box (only one) will popup 2 seconds after you are done with all your changes on the input field. That is, if you change the input field before 2 seconds, you delay the popup by another 2 seconds.

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

EDIT
While above is one method of doing it, AngularJS has come up with its own implementation for this particular feature in v1.3+. ngModelOptions can be used.

edited Oct 9, 2014 at 20:39

answered Oct 9, 2014 at 19:55

Angad

3,4293 gold badges33 silver badges40 bronze badges

1 Comment

Nebulosar Over a year ago

With this approach, you always get the newest value, if I am reading the code correctly. This is pretty cool when you want only yhe newest value, it works the other way around comparing it to the debounce value of ng-model-options and if this works for your use case, this is a valid option. Although, as I recall, ng-model-options also has a delay option doing this for you!

Rohan Büchner · Accepted Answer · 2015-11-24 05:32:01Z

0

You could possibly check out UnderscoreJS, which has .debounce() and .throttle()

edited Nov 24, 2015 at 5:32

Rohan Büchner

5,4035 gold badges66 silver badges108 bronze badges

answered Oct 9, 2014 at 20:02

Noah Solomon

1,26115 silver badges24 bronze badges

2 Comments

Rohan Büchner Over a year ago

debounce is already included in angular's ng-model-options no need for underscore (even though it is a cool library)

Nebulosar Over a year ago

Total agree with Rohan, underscore does many cool things, but is totally unnessecary for this use case for angularJs has the ng-model-options that handle this stuff for you, instead of bloating your controller/service even more!

Collectives™ on Stack Overflow

AngularJS - Fire $timeout event on ng-change only once

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related