Writing countdown timer in Angular.js similar to Keith Wood's jQuery Countdown?

[Victor Hooi]

Hi,

I'm hoping to implement a countdown timer in my app similar to the one here:

http://keith-wood.name/countdown.html

What is the recommended way to achieve this in Angular.js?

I did see this SO question on the topic.

http://stackoverflow.com/questions/12050268/angularjs-make-a-simple-countdown

Where they seem to recommend using onTimeout()

This is the same as $timeout? (http://docs.angularjs.org/api/ng.$timeout)

Is this the best practice way of doing it?

Say I wanted milliseconds on my countdown, I would just change the delay - however, are there any issues like flickering or app performance that I should be aware of?

Cheers,

Victor

[Owen M]

A big concern is having it fire every millisecond. The SO example works well and is a good demonstration of using Angular. Be very easy to tweak the code to make a countdown timer. The issue you'll be running into is that every time you change a scope variable you will be triggering a digest loop (the loop that handles changing all your DOM as well as any watcher functions looking at that countdown timer value). Although the digest loop is fast and quite optimized, having it constantly checking things seems like a recipe for bad things. This would be the UI/Performance stuff you wanted to know about.

As one suggestion, use a standard setInterval call to have the UI update with millisecond countdown. Then when the countdown reaches zero have it fire off an event or update a scope variable to trigger something to happen in the rest of your app. If you need the timer to make changes to the rest of the app depending on the amount of time left, I would recommend setting up a second timer. Have the millisecond timer countdown something on the screen using setInterval, and have a second countdown happening every second update things in your angular scope. Start them at the same time.

[Victor Hooi]

Hi,

Ok, so your recommendation is to use setInterval (https://developer.mozilla.org/en-US/docs/DOM/window.setInterval) to animate the actual numbers counting down, right?

How should I do the actual UI update via Angular.js? Do I need to call $apply constantly? Is there any chance you could provide sample code please? (It might help with understanding).

For what actually happens when the counter hits zero - I should use the $timeout service, right?

Also, the SO page mentions using the $timeout service rather than calling setTimeout or setInterval directly. What's that about?

I noticed there isn't a wrapper service for setInterval, although sometbody did write one here:

https://groups.google.com/forum/?fromgroups=#!topic/angular/cAuRDuCbyPc

https://github.com/florianorben/angular-interval

Cheers,

Victor

[ThomasBurleson]

Here is a AngularJS-way of doing a countDown... using injected $timeOut service.

Notice how the $scope exposes pause() and resume() features to the UI.

http://jsfiddle.net/ThomasBurleson/4nww4/

- Thomas Burleson

[Owen M]

Nice implementation. Again, if you are calling the countdown every millisecond updating the scope that often may run into issues.

[Andy Joslin]

I would use scope.$digest() on the directive's scope, which will only digest that specific scope, instead of $apply (which is global).

[Pawel Kozlowski]

On Wed, Mar 13, 2013 at 5:57 PM, Andy Joslin <andyt...@gmail.com> wrote:
> I would use scope.$digest() on the directive's scope, which will only digest
> that specific scope, instead of $apply (which is global).

+100 Andy!

Was about to write similar e-mail :-)

Cheers,
Pawel


--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Ram Singla]

Thanks Andy for the pro-tip. 

[Anil Singh]

It might help too

http://www.code-sample.com/2014/12/countdown-watch-timer-in-angularjs.html

Thank you!!!

----------------------------------------------------------------------------------------