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

Proper way to countdown and redirect

本文关键字：方法 重定向 倒计时      更新时间：2023-09-26

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

假设我想在 10 秒后重定向用户，同时我想显示警告并显示倒计时。我只使用一个从形式 10 开始的 seconds 变量和一个秒数较低的函数$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) { ... }事件来取消承诺，但这样我需要保存intervalPromise变量并...似乎太有线了！有没有更好的方法来以直接的方式实现此倒计时逻辑？

第一次使用$timeout不$interval

为什么存储承诺似乎太连线了？当然，您需要将其存储在某个地方以便以后调用它：这是我的做法： 

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