Angular.jsで複数のタイマー機能を表示

Question

開始時間の異なるWebページに2つのタイマーを表示しようとしています。

最初のタイマーは5秒間しか表示されず、10秒後にはtimer2を表示する必要があります。 私はAngularの新機能で、次のコードをまとめました。

settimeoutが3回目に呼び出されたとき以外は正しく動作しているようですが、3回目は正しく動作せず、非常に高速になります。私の見解では

コントローラ

// 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) 


     } 
    } 

}) 

私は単にそれが合算ですので、あなたは基本的に複数のstartTimer機能を開始している

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

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

Answer 1

を持っています。私があなたの問題をよく理解していれば、あなたはそれらのウォッチャーとタイムアウトをすべて持っている必要はありません。

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

    ++$scope.tickCount 

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

fiddle