正確的倒計時和重定向方式

Question

我使用ngRoute模塊來處理angularJS單頁應用程序中的多個鏈接。有時用戶會遇到應該重定向的錯誤鏈接（因爲內容是動態的，取決於外部來源，但不相關）。

比方說，我想在10秒後重定向用戶，同時我想顯示警告並顯示倒計時。我只是用一個seconds變量起始形式10與直到0 $interval下秒數的函數，然後重定向

$scope.seconds = 10; 
$scope.startCountdown = function() { 
    var intervalPromise = $interval(function() { 
     if ($scope.seconds > 0) { 
      $scope.seconds--; 
     } 
     else { 
      $interval.cancel(intervalPromise); 
      $location.search({}); 
      $location.path("/"); 
     } 
    }, 1000); 
} 
$scope.startCountdown(); 

它的工作原理，但是當倒計時結束前，用戶改變位置（他甚至可以從頂部$location.path("/Summary")菜單）倒計時仍在後臺進行，幾秒鐘後，他被重定向回家。

我該如何解決這個問題？我可以使用$scope.$on("$routeChangeSuccess", function (args) { ... }事件來取消承諾，但這種方式我需要保存intervalPromise變量，並且......它似乎太有線！有沒有更好的方式直接實現這個倒計時邏輯？

Answer 1

首先使用$timeout不$interval此

爲什麼存儲的承諾似乎過於有線？當然，您需要將它存儲在某處以便稍後調用它：以下是我該如何做的：

var promise = $timeout(function(){ 
    // your code 
    promise = null; 
    //perform redirect 
}, 10000); 
$scope.$on("$routeChangeSuccess", function (args) { 
    if(promise != null){ 
     $timeout.cancel(promise); 
    } 
};