using setInterval in angularjs factory

Question

I was trying the code given in angularjs docs (given here: http://jsfiddle.net/zGqB8/) It just implements a time factory and uses $timeout to update the time object after each second.

angular.module('timeApp', [])
.factory('time', function($timeout) {
    var time = {};

    (function tick () {
        time.now = new Date().toString();
        $timeout(tick, 1000);  // how to do it using setInterval() ?
    })();

    return time;
});

How would I do it using setInterval() function instead of $timeout() ? I know that one need to use scope.$apply() to enter the angular execution context but how would that work in a factory function? I mean, in a controller, we have a scope, but we don't have scope in a factory function?

why do you need to use setInterval? This achieves the same results. — Liviu T.
– Liviu T., Commented Jan 9, 2013 at 14:48
@LiviuT. yes, it works here but I just wanted to know how will I enter angular execution context when inside a factory function. — user183123
– user183123, Commented Jan 9, 2013 at 16:54
Angular now has $interval: docs.angularjs.org/api/ng/service/$interval — Surreal Dreams
– Surreal Dreams, Commented Jul 9, 2014 at 21:36

Michael Cole · Accepted Answer · 2014-10-17 12:53:04Z

38

You can use $timeout as an interval.

var myIntervalFunction = function() {
    cancelRefresh = $timeout(function myFunction() {
        // do something
        cancelRefresh = $timeout(myIntervalFunction, 60000);
    },60000);
};

If the view is destroyed, you can destroy it with listening on $destroy:

$scope.$on('$destroy', function(e) {
        $timeout.cancel(cancelRefresh);
});

edited Oct 17, 2014 at 12:53

Michael Cole

16.3k7 gold badges90 silver badges98 bronze badges

answered Jan 9, 2013 at 14:58

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

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

7 Comments

user183123 Over a year ago

I guess you misinterpreted the question. The setInterval() function of JS calls a function repetedly.

asgoth Over a year ago

I know. At the moment there is no setInterval alternative in angular. The only way to simulate it is a $timeout function which calls itself recursively.

Leblanc Meneses Over a year ago

lets see how long it lasts before i start getting stackoverflow exceptions

bmm6o Over a year ago

@LeblancMeneses: there is no recursion here, so there won't be any stack overflow.

ljs Over a year ago

@TylerForsythe you're right, I've reverted a change which incorrectly renamed myFunction to myIntervalFunction. There is however no issue with a stack overflow as each $timeout is not a recursive call but rather defers the execution of the provided function which will be executed with a new call stack.

|

BradGreens · Accepted Answer · 2013-12-19 23:03:21Z

Update

Angular has implemented an $interval feature in version 1.2 - http://docs.angularjs.org/api/ng.$interval

Legacy example below, disregard unless you're using a version older than 1.2.

A setInterval implementation in Angular -

I've created a factory called timeFunctions, which exposes $setInterval and $clearInterval.

Note that any time I've needed to modify scope in a factory I've passed it in. I am unsure if this meets the "Angular way" of doing things, but it works well.

app.factory('timeFunctions', [

  "$timeout",

  function timeFunctions($timeout) {
    var _intervals = {}, _intervalUID = 1;

    return {

      $setInterval: function(operation, interval, $scope) {
        var _internalId = _intervalUID++;

        _intervals[ _internalId ] = $timeout(function intervalOperation(){
            operation( $scope || undefined );
            _intervals[ _internalId ] = $timeout(intervalOperation, interval);
        }, interval);

        return _internalId;
      },

      $clearInterval: function(id) {
        return $timeout.cancel( _intervals[ id ] );
      }
    }
  }
]);

Example Usage:

app.controller('myController', [

  '$scope', 'timeFunctions',

  function myController($scope, timeFunctions) {

    $scope.startFeature = function() {

      // scrollTimeout will store the unique ID for the $setInterval instance
      return $scope.scrollTimeout = timeFunctions.$setInterval(scroll, 5000, $scope);

      // Function called on interval with scope available
      function scroll($scope) {
        console.log('scroll', $scope);
        $scope.currentPage++;

      }
    },

    $scope.stopFeature = function() {
      return timeFunctions.$clearInterval( $scope.scrollTimeout );
    }

  }
]);

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Could you call a normal JavaScript method and then within that method wrap the Angular code with an $apply?

Example

timer = setInterval('Repeater()', 50);

var Repeater = function () {
  // Get Angular scope from a known DOM element
  var scope = angular.element(document.getElementById(elem)).scope();
  scope.$apply(function () {
    scope.SomeOtherFunction();
  });
};

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 13, 2013 at 10:38

Greg

31.3k18 gold badges69 silver badges86 bronze badges

Comments

Cemo · Accepted Answer · 2013-10-18 11:00:22Z

2

Latest release candidate (1.2.0 rc3) has interval support. See changelog

answered Oct 18, 2013 at 11:00

Cemo

5,61011 gold badges54 silver badges83 bronze badges

Collectives™ on Stack Overflow

using setInterval in angularjs factory

4 Answers 4

7 Comments

Comments

Example

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related