Angular Timer directive not working

Question

I want a timer of 1 minute which should stop as soon as it reaches 1 minute and should call a function then. I am using angular-timer directive for this.

The code I am using in html is

<timer end-time="60000">
    {{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
</timer>

I am providing end time as 60000 milliseconds(1 minute) in the attribute 'end-time'. But it is not working. When end time value is '1451628000000', then it works. Where I am going wrong ? Also help me with how to call a function when the timer finished.

Thanks in advance.

6000 milliseconds is 6 seconds, not 1 minute. – Aᴍɪʀ Dec 12 '15 at 17:05 — Aᴍɪʀ, Dec 12 '15 at 17:05
@Amir My mistake. But for 6 seconds also, its not working – Neha Gupta Dec 12 '15 at 17:09 — Neha Gupta, Dec 12 '15 at 17:09

Aᴍɪʀ · Answer 1 · 2015-12-12T17:18:46.873

end-time parameter takes timestamp in milliseconds. Your 60000 is taken as timestamp. So it is already stopped.

What you can do is to compute now's timestamp and add 60000 more for adjustments.

In your controller:

$scope.endTime = (new Date()).getTime()+60*1000;

In the view:

<timer end-time="{{endTime}}">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>

I'm not exactly sure in which format you need to display that timer, but for what you have asked, this will do.

To run a function after specific period of time, simply use $timeout service inside your controller. Inject $timeout and use it like setTimeout function in JS.

$timeout(function () {
    console.log('this will run after 1 minutes');
}, 60*1000);

For more info, check out $timeouts documentation.

Partha Sarathi Ghosh · Answer 2 · 2015-12-12T17:27:04.150

You could also use count down time as follows.

The countdown timer

<timer interval="1000" countdown="100">{{countdown}}</timer>

will start its countdown from 100 until it reaches 0 by ticking every second

This markup will display countdown time in minute and seconds only. This attribute can be applied to regular clock timer as well.

<timer countdown="10041" max-time-unit="'minute'" interval="1000">
     {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}
</timer>

A countdown timer that updates a value once the callback is reached

<timer countdown="3" interval="1000" finish-callback="callbackTimer.finished()">
    {{seconds}} second{{secondsS}}
</timer>

score 0 · Answer 3 · answered Dec 12 '15 at 17:08

Your mistake is simple, and very easy to fix. JavaScript always uses time in milliseconds so 6000 eqauls to 6 seconds. It should work if you try this:

<timer end-time="60000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>

score 0 · Answer 4 · answered Dec 12 '15 at 17:25

Following the Angular-Timer docs here, you should use a combination of interval, countdown and finish-callback to achieve your use case.

countdown - start at this number and countdown to 0

interval - interval for which your screen will be updated. So if you use interval as 1000, it will refresh every second (roughly)

finish-callback - to call a function after the countdown is complete.

<timer countdown="60" interval="1000" 
       finish-callback="myFinishCallback()">
   {{seconds}} second{{secondsS}}
</timer>

score 0 · Answer 5 · answered Dec 12 '15 at 17:58

Rather than using the timer in the html tag which is a attribute its better to use in the angularjs like $timeout(callAtTimeout, 60000);, then when you can call the method callAtTimeOut() which can do your work simple. If better you can add a watch if you don't know the exact timing where the ajax call for the request will happen

Angular Timer directive not working

5 Answers5