Showing multiple timer function in Angular.js

Question

I am trying to display two timer on a webpage with different start times.

First timer only shows for 5 seconds and then after 10 seconds I need to show timer2. I am very new to Angular and have put together following code.

It seems to be working fine except when the settimeout is called the third time it doesn't work correctly and it starts going very fast.

Controller

 // initialise variables
$scope.tickInterval = 1000; //ms
var min ='';
var sec ='';

$scope.ti = 0;
$scope.startTimer1 = function() {
    $scope.ti++;
    min = (Math.floor($scope.ti/60)<10)?("0" + Math.floor($scope.ti/60)):(Math.floor($scope.ti/60));
    sec = $scope.ti%60<10?("0" + $scope.ti%60):($scope.ti%60);
    $scope.timer1 =  min + ":" + sec;
    mytimeout1 = $timeout($scope.startTimer1, $scope.tickInterval); // reset the timer
}

//start timer 1
$scope.startTimer1();

$scope.$watch('timer1',function(){

    if($scope.timer1 !=undefined){
        if($scope.timer1 =='00:05'){
            $timeout.cancel(mytimeout1);
            setInterval(function(){

                $scope.startTimer2()
                $scope.ti = 0;

            },1000)
        }
    }

})

//start timer 2 after 2 mins and 20 seconds
$scope.startTimer2 = function() {
    $scope.ti++;
    min = (Math.floor($scope.ti/60)<10)?("0" + Math.floor($scope.ti/60)):(Math.floor($scope.ti/60));
    sec = $scope.ti%60<10?("0" + $scope.ti%60):($scope.ti%60);
    $scope.timer2 =  min + ":" + sec;
    mytimeout2 = $timeout($scope.startTimer2, $scope.tickInterval);
}


$scope.$watch('timer2',function(){

    if($scope.timer2 !=undefined){
        if($scope.timer2 =='00:05'){

            $timeout.cancel(mytimeout2);

            setInterval(function(){

                $scope.startTimer1();
                $scope.ti = 0;

            },1000)


        }
    }

})

In my view I simply have

<p>{{timer1}}</p>

<p>{{timer2}}</p>

You shouldn't use setInterval but $interval.

yeouuu
– yeouuu

2017-10-05 12:56:24 +00:00
Commented Oct 5, 2017 at 12:56 — yeouuu
– yeouuu, Commented Oct 5, 2017 at 12:56

Guillaume Roche-Bayard · Accepted Answer · 2017-10-05 13:29:33Z

1

You're basically starting multiple startTimer function so it's adding up. If i understood your problem well you don't even need to have all those watchers and timeouts. You just can use $interval this way :

$scope.Timer = $interval(function () {

  ++$scope.tickCount

  if ($scope.tickCount <= 5) {
    $scope.timer1++
  } else {
    $scope.timer2++
    if ($scope.tickCount >= 10)
        $scope.tickCount = 0;
  }
}, 1000);

Working fiddle

edited Oct 5, 2017 at 13:29

answered Oct 5, 2017 at 13:17

Guillaume Roche-Bayard

4777 silver badges18 bronze badges

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

3 Comments

snowflakes74 Over a year ago

Thank you, but I need to display two "count up " timers in minutes:seconds format. When the first one reaches 02:00 then it needs to stop /pause and second timer should start from 00:01.Once second timer reaches 02:00 it pauses and then the first one recycles again. Hence I was using watches.

Guillaume Roche-Bayard Over a year ago

check the new fiddle, it should be what you're looking for - note that i didn't formated the timers, but you could use your code sample on the integer to format it to mm:ss

snowflakes74 Over a year ago

Thank you for showing me how to solve my issue efficiently.

Collectives™ on Stack Overflow

Showing multiple timer function in Angular.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related