如何修改我的功能，以便能夠取消控制器中的任何位置的間隔

我正在嘗試創建倒計時，並且我希望能夠取消不僅在達到0時的間隔，而且還可以通過單擊按鈕來取消well.I可以修改我的功能，以便能夠從控制器的任何地方取消間隔。如何修改我的功能，以便能夠取消控制器中的任何位置的間隔

function countDown(total) { 
total = total * 60; 
var interval = $interval(function() { 
    var minutes = Math.floor(total/60); 
    var seconds = total - minutes * 60; 
    if (minutes < 1) 
    { 
     minutes = '0:'; 
    } 
    else 
    { 
     minutes = minutes + ':'; 
    } 

    if (seconds < 10) 
    { 
     seconds = '0' + seconds; 
    } 

    self.remainingTime = "Remaining time: " + minutes + seconds; 
    total--; 

    if(minutes === '0:' && seconds === '00') 
    { 
     $interval.cancel(interval); 
    } 
}, 1000);

}

來源

2017-04-13 user6934713

製作'interval'可變全球。然後，您可以使用其他函數（如「stopCountdown」）來訪問它。 – Oen44

你有$範圍，或者你有這個工作嗎？ –

如何使其成爲全球性的。是的我有$ scope – user6934713

至於建議由其他用戶，你應該interval全球控制器。然後在其他功能，你想取消interval你可以安全地調用它。

在下面的示例看看：

angular.module('app', []) 
 
    .controller('ctrl', function($interval) { 
 

 
    var self = this; 
 

 
    var interval; 
 

 
    self.wizard = { 
 
     startInterval: startInterval, 
 
     cancelInterval: cancelInterval 
 
    }; 
 

 
    startInterval(); 
 

 
    return self.wizard; 
 

 
    function startInterval() { 
 
     countDown(24); 
 
    } 
 

 
    function cancelInterval() { 
 
     $interval.cancel(interval); 
 
    } 
 

 

 
    function countDown(total) { 
 
     cancelInterval(); 
 

 
     total = total * 60; 
 
     interval = $interval(function() { 
 
     var minutes = Math.floor(total/60); 
 
     var seconds = total - minutes * 60; 
 
     if (minutes < 1) { 
 
      minutes = '0:'; 
 
     } else { 
 
      minutes = minutes + ':'; 
 
     } 
 

 
     if (seconds < 10) { 
 
      seconds = '0' + seconds; 
 
     } 
 

 
     self.wizard.remainingTime = "Remaining time: " + minutes + seconds; 
 
     total--; 
 

 
     if (minutes === '0:' && seconds === '00') { 
 
      $interval.cancel(interval); 
 
     } 
 
     }, 1000); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<span ng-app="app" ng-controller="ctrl as ctrl"> 
 
<span ng-bind="ctrl.remainingTime"> </span> 
 

 
<br/> 
 

 
<a href="" ng-click="ctrl.cancelInterval()"> Cancel Interval </a> 
 
<br/> 
 

 
<a href="" ng-click="ctrl.startInterval()"> Start Interval </a> 
 
</span>

來源

2017-04-13 16:09:28 lealceldeiro

謝謝我遵循你的例子，但是當我取消間隔並開始新的倒計時時，我收到以下錯誤：angular.js：14328錯誤：[$ rootScope：inprog] $ apply already already progress ，angular.js：14328錯誤：[$ rootScope：inprog] $ digest已在進行中 – user6934713

@ user6934713，好的，我剛更新了未來讀者的代碼。現在有一個'startInterval'函數，您可以重置'interval'並重構使用'controller as'語法的代碼，就像您現在一樣。 – lealceldeiro

我創建使用自代替$範圍你是在你的代碼段的上方的例子。正如其他人所提到的，將時間間隔var移動到全局範圍將修復此問題。我還添加了停止和啓動功能來測試您在上面的示例中提到的問題。

已更新 - 我在停止間隔中添加了一些代碼以將間隔重置爲未定義。我在Angular的網站上找到了這種用法的一個例子，因此可能值得嘗試查看它是否修復了您的其他問題。

var app = angular.module('app', []); 

app.controller('BaseController', function($interval) { 
    var self = this; 
    var interval; 

    function countDown(total) { 
    total = total * 60; 
    interval = $interval(function() { 
     var minutes = Math.floor(total/60); 
     var seconds = total - minutes * 60; 
     if (minutes < 1) { 
     minutes = '0:'; 
     } else { 
     minutes = minutes + ':'; 
     } 

     if (seconds < 10) { 
     seconds = '0' + seconds; 
     } 

     self.remainingTime = "Remaining time: " + minutes + seconds; 
     total--; 

     if (minutes === '0:' && seconds === '00') { 
     $interval.cancel(interval); 
     } 
    }, 1000); 
    } 

    self.stopInterval = function(){ 
    if (angular.isDefined(interval)) { 
     $interval.cancel(interval); 
     interval = undefined; 
    } 
    } 

    self.startInterval = function(){ 
    countDown(10); 
    } 
});

然後在HTML我增加了一個按鈕來啓動和停止的時間間隔，像這樣：

<body ng-app="app"> 
    <div ng-controller="BaseController as baseCtrl"> 
    {{ baseCtrl.remainingTime }} 
    <div> 
     <button ng-click="baseCtrl.startInterval()">Start Countdown</button> 
     <button ng-click="baseCtrl.stopInterval()">Stop Countdown</button> 
    </div> 
    </div> 
</body>

您可以查看codepen例如here

來源

2017-04-13 16:40:59 Anthony

謝謝。我在取消間隔後調用了另一個函數，並收到以下錯誤：angular.js：14328錯誤：[$ rootScope：inprog] $ apply已在進行中，angular.js：14328錯誤：[$ rootScope：inprog] $摘要已在進行中。 – user6934713

已更新 - 我在停止間隔函數中添加了一些代碼以將間隔重置爲未定義。我在Angular的網站上找到了這種用法的一個例子，所以可能值得嘗試一下，看看它是否解決了上述問題。 – Anthony

如何修改我的功能，以便能夠取消控制器中的任何位置的間隔

回答

相關問題