Introduce delay on angular change

Question

ng-change triggers immediately but I'd like to introduce some delay before sending request to server. I've read about the watch function but looks like there is no "simple" solution.

Any idea for quick refactoring to add simple delay on the following code?

$scope.searchOrder = null
$scope.change = (text) ->
  search_params = $scope.searchOrder
  $http.get('./api/orders?q=' + search_params).success( (data) ->
    $scope.orders = data
    console.log('Found matching order.')
    #console.log data
  ).error( ->
    console.error('No orders found.')
  )

Have you looked at $timeout? – shaunhusain Mar 16 '14 at 17:55 — shaunhusain, Mar 16 '14 at 17:55

Theo · Answer 1 · 2014-03-16T21:31:26.760

try:

var delayDuration = 200;
$scope.searchOrder = null
$scope.change = (text) ->
$timeout( ->
search_params = $scope.searchOrder
      $http.get('./api/orders?q=' + search_params).success( (data) ->
        $scope.orders = data
        console.log('Found matching order.')
        #console.log data
      ).error( ->
        console.error('No orders found.')
      ), delayDuration);

The code should be pretty self explanatory. It just uses the AngularJS timeout service. You should use this over the js setTimeout method so that angular is aware of when it completes.

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

I believe I've answered this question in a tangential way here by creating a directive called ngDelay. This be implemented using ng-change in the normal way. Take a look, and see if it helps.

edited May 23 '17 at 11:43

Community

1
1

answered Mar 19 '14 at 13:01

Doug

2,441
2
19
22

score 0 · Answer 3 · answered Aug 07 '15 at 07:25

You can utilize the debounce property ngModelOptions provides to achieve that very easy without using $timeout at all. Here's an example:

JS fiddle example

HTML:

<div ng-app='app' ng-controller='Ctrl'>
    <input type='text' placeholder='Type a name..'
        ng-model='vm.name'
        ng-model-options='{ debounce: 1000 }'
        ng-change='vm.greet()'
    />

    <p ng-bind='vm.greeting'></p>
</div>

JS:

angular.module('app', [])
.controller('Ctrl', [
    '$scope',
    '$log',
    function($scope, $log){
        var vm = $scope.vm = {};

        vm.name = '';
        vm.greeting = '';
        vm.greet = function greet(){
            vm.greeting = vm.name ? 'yo, ' + vm.name + '!' : '';
            $log.info(vm.greeting);
        };
    }]);

Introduce delay on angular change

3 Answers3