How to create singleton service for timer in angularjs?

Question

I am doing a project in angularjs (1.x). My requirement is that I need to count the number of seconds elapsed.

For that, I have written a code using $interval service in my controller which is working perfectly fine.

Now , since this code is shared by many objects, so I thought to make it singleton. How can we do so?

Below is my code inside controller:

scope.timeDiff = 0;
 var intervalId = $interval(function(){
           scope.timeDiff += 1000; 
        },1000);

 scope.$on('$destroy',function(){
           $interval.clear(intervalId);
 });

I have tried to create a service of timer like this:

angular.module('myModule').factory('customTimer', ['$interval','$rootScope',
  function ($interval,$rootScope) {
     var timerId, defaultInterval = 1000;     
     return {
       startTimer: function (timeDiff) {
        $interval(function(){
           timeDiff += 1000;
        },1000);
        return timeDiff;
       }
     };
}]);

And then I try to call this service in my controller like this:

scope.timeDiff = customTimer.startTimer( scope.timeDiff);        
console.log( "new timediff:",scope.timeDiff );

While timeDiff is updating in my timer service, but controller is always getting 0. What could be the reason?

Possible duplicate of [Are Angularjs services singleton?](https://stackoverflow.com/questions/21496331/are-angularjs-services-singleton) — Kaustubh Khare, May 25 '18 at 05:28
Angular service is singleton, you don't need to make it singleton — huan feng, May 25 '18 at 05:31
In your service, you are returning `timeDiff`. It will return immediately. when you called `startTimer` function. It will not wait till 1 sec. — Kaustubh Khare, May 25 '18 at 05:59
@KaustubhKhare could you please help me how to resolve this issue? — Anubha Gupta, May 25 '18 at 06:11
Actually not quite understand you question, what's the begin point and end point? — huan feng, May 25 '18 at 06:36
Actually, from backend I am getting some information periodically..So I need to count the seconds elapsed between arrival of information. — Anubha Gupta, May 25 '18 at 06:41

I. Ahmed · Accepted Answer · 2018-05-26T13:56:50.643

First of all angular service and factory is already singleton.

The only problem is a synchronization problem.

Its asynchronous call, so you have to ensure it by using callback or promise.

In controller add the following methods:

$scope.callback = function(retTime) {
  console.log( "new timediff:",retTime);
}
$scope.timeDiff = customTimer.startTimer( scope.timeDiff, $scope.callback);   

$scope.$on('$destroy',function(){
       customTimer.stopTimer();
});

The factory can be written as follows:

angular.module('myModule').factory('customTimer', ['$interval','$rootScope',
  function ($interval,$rootScope) {
     var timerId, defaultInterval = 1000;     
     return {
       startTimer: function (timeDiff, callback) {
        timerId = $interval(function(){
           timeDiff += 1000;
        // This if block will ensure your controller callback called after the value of time diff is updated.
           if(callback) {
              callback(timeDiff)
           }
        },1000);
        return timeDiff;
       },
       stopTimer: function () {
         $interval.cancel(timerId);
       }
     };
}]);

The angular service can be written as follows:

angular.module('myModule').service('customTimer', ['$interval','$rootScope',
  function ($interval,$rootScope) {
     var self = this;
     self.defaultInterval = 1000;     

       self.startTimer = function (timeDiff, callback) {
        self.timerId = $interval(function(){
           timeDiff += 1000;
        // This if block will ensure your controller callback called after the value of time diff is updated.
           if(callback) {
              callback(timeDiff)
           }
        },1000);
        return timeDiff;
       }
       self.stopTimer = function () {
         $interval.cancel(self.timerId);
       }

}]);

Your solution is working fine. Thank you so much. Could you please edit the code of service and add the code for destroying/clear the interval ? — Anubha Gupta, May 25 '18 at 09:47
Please check the answer is updated with destroying and clear the interval — I. Ahmed, May 26 '18 at 13:57

How to create singleton service for timer in angularjs?

1 Answers1