2016-07-28 10 views
2

AngularJS間隔機能を使用して、ミリ秒で連続している時間があります。 ポーズ続行ボタンを作成しました。いつでもポーズボタンがヒットするとAngularJSのInterval.cancel機能が起動し、ボタンをクリックすると、インターバル機能がトリガーされますが、問題が発生しましたボタンを2回以上続けてからポーズボタンは一時停止せず、ミリ秒も継続しますが、continueボタンが一度押されると一時停止します。以下は、UIのスクリーンショットです。ヘルプは本当に感謝しています。AnglularJS間隔は、間隔(btnを続ける)を2回以上押すと一時停止しません。

enter image description here

AngularJSコード

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $interval) { 
    $scope.theTime = new Date(); 

    $scope.startInterval = function(){ 
     $scope.flag = $interval(function(){ 
         $scope.theTime = new Date(); 
        }, 6); 
    } 

    $scope.stopInterval= function(){ 
     if($scope.flag) 
     $interval.cancel($scope.flag); 
    } 
    // $scope.startInterval(); 
}); 

HTMLコード

<div class="col-lg-12 text-center" ng-app="myApp" ng-controller="myCtrl" > 
<h3 ><b id="thetime"><span id="acttime" ng-mouseover="stopInterval()" ng-mouseleave="startInterval()" >{{theTime| date:'hh:mm:ss sss a'}}</span> <button class="btn btn-sm btn-success Start" ng-click="stopInterval()" style="margin-bottom: 70;"> Pause </button> 
<button class="btn btn-sm btn-info Start" ng-click="startInterval()" style="margin-left: -92;margin-top: 25;"> Continue </button></b></h3> 
</div> 

答えて

1

これを試してみて、そのは

は012を作る作業しますタイマが停止している間はは未定義です。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope, $interval) { 
 
    $scope.theTime = new Date(); 
 
    $scope.flag = 'undefined'; 
 
    $scope.startInterval = function(){ 
 
     if($scope.flag == 'undefined'){ 
 
     $scope.flag = $interval(function(){ 
 
         $scope.theTime = new Date(); 
 
        }, 6); 
 
      } 
 
    } 
 

 
    $scope.stopInterval= function(){ 
 
     if(!angular.isUndefined($scope.flag)){ 
 
     $interval.cancel($scope.flag); 
 
     $scope.flag = 'undefined'; 
 
     } 
 
    } 
 
    // $scope.startInterval(); 
 
});
<!DOCTYPE html> 
 
<html lang="en-us" ng-app="myApp"> 
 
<head> 
 
<title>Angularjs</title> 
 
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script> 
 

 

 
</head> 
 

 
<body> 
 
    <div ng-controller="myCtrl"> 
 
     <div class="col-lg-12 text-center" ng-app="myApp" ng-controller="myCtrl" > 
 
<h3 ><b id="thetime"><span id="acttime" ng-mouseover="stopInterval()" ng-mouseleave="startInterval()" >{{theTime| date:'hh:mm:ss sss a'}}</span> <button class="btn btn-sm btn-success Start" ng-click="stopInterval()" style="margin-bottom: 70;"> Pause </button> 
 
<button class="btn btn-sm btn-info Start" ng-click="startInterval()" style="margin-left: -92;margin-top: 25;"> Continue </button></b></h3> 
 
</div> 
 
    </div> 
 
</body>

+1

おかげでチームメイト! :) – Jeeva

関連する問題