javascript - 倒计时和重定向的正确方法

Question

我正在使用 ngRoute 模块来处理 angularJS 单页应用程序中的多个链接。有时用户会到达错误的链接，应该被重定向(因为内容是动态的，它取决于外部源，但它不相关)。

假设我想在 10 秒后重定向用户，同时我想显示警告并显示倒计时。我只是使用一个 seconds 变量开始形式 10 和一个函数 $interval 秒数直到 0，然后重定向

$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) { ... } 事件来取消 promise ，但那样我需要保存 intervalPromise变量和...它似乎太有线了!有没有更好的方法以直接的方式实现这个倒计时逻辑？

Answer 1

为此首先使用$timeout 而不是$interval

为什么存储 promise 似乎太有线了？当然，您需要将它存储在某个地方以便稍后调用它:我会这样做:

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