Can I display $timeout value in progress bar?

Question

I'm thinking about displaying the value of my $timeout to show the people when their time is up. The problem is I can't find anything on the internet about it.

So my question is...

Is it possible to show the value of your $timeout in a progress bar ?

(I know that this is probably not a valid SO question, but I just want to know the answer.)

Answer 1

If what you want is after starting a $timeout, find out how long it has left - then the answer is no .

It is however a small difficulty, easily bypassed.

You can create a service that implements all functionality from $timeout and provides an extra function that returns you the time left,

Or the easier option that when providing the delay for your $timeout, save the time when you executed the $timeout and at any time you can compare it with new Date() and see how much time is left.

Answer 2

You can probably use a custom directive which can accept a number of timeout and the same number you can pass to your $timeout function.

In this way you can achieve what you want.

An available library: http://siddii.github.io/angular-timer/

Answer 3

I think you are probably searching for something like this:-

$scope.count = 10000;
var now = new Date();
now = now.getTime();
var date_new;

function show (){
  $timeout(function() {
    date_new = new Date();
    date_new = date_new.getTime();
  }, $scope.count);
}

$scope.showTime = function () {
  show();

  if( date_new ) {
    var disable = $timeout(function() {
      now = new Date();
      now = now.getTime();
      $scope.showTiming = now - date_new;

      if ($scope.showTiming >= $scope.count) 
        disable();

      }, 10, false);
    }
}