javascript - ionic : $timeout action is being executed even if it is cancelled

Question

下午好，

我一直在努力解决一个不熟悉的问题。但首先让我解释一下我想要实现的目标。

目的

我想做的是，在每个 View 上设置一个计时器，所以如果互联网连接很慢，计时器会调用一个显示 ionicPopup 的函数，并询问以下问题:“您想刷新 View 吗？”与刷新按钮相结合。单击该按钮时， View 将刷新。如果 View 及时加载(我已将计时器设置为 10000 毫秒)，则会调用 $timeout.cancel 操作并且计时器停止。

如果这就是全部，那么现在就可以正常工作了。

问题

如果我快速浏览主页，计时器似乎不会停止，并且“刷新弹出窗口”会在另一个页面上弹出。只有当您高速点击时才会发生这种情况。看起来像是几个弹出窗口同时在彼此下方弹出。我不知道可能是什么问题，但我猜如果您快速浏览页面，则不会调用 $timeout.cancel。

代码

服务

    .factory('Timer', function ($ionicPopup, $state, $timeout) {
    return {
        start: start
    };

    function start() {
        return $timeout(showPopup, 10000);
    }

    function showPopup() {
        $ionicPopup.show({
            title: 'Slow internetconnection',
            template: 'Click refresh to try again.',
            buttons: [
                {
                    text: 'Refresh',
                    onTap: function (e) {
                        $state.reload()
                    }
                }
            ]
        })
    }
})

Controller

    .controller('HomeCtrl', function ($scope, Request, Timer, $timeout) {
    var timer = Timer.start();

    Request.execute().finally(function () {
        $timeout.cancel(timer);
    })

    $scope.$on('$destroy', function () {
        $timeout.cancel(timer);
    });
})

我希望我的问题是可以理解的。

Answer 1

这里需要注意的关键是:

If I navigate through my main pages rapidly, it looks like the timers aren't stop and the "Refresh popup" pops up on another page.

当您浏览时，您的 ionic View 会被创建/销毁，因此您会丢失对 timer 对象的引用。

因此，在使用计时器的 Controller 中，您必须在离开该页面之前使计时器无效。这是因为计时器是 JavaScript 的 setTimeout 和 setInterval 的包装器，并且 JavaScript 具有方法级别范围，该范围将方法作为参数传递给 setInterval，这将当你的 Controller 被销毁时，保留对它的引用。因此，当您更改 View 时，尽管您的 Controller 实例可能会被删除，但计时器不会。

在 Controller 中添加 $ionicView.afterLeave 回调。

$scope.$on("$ionicView.afterLeave", function(event, data){
   $timeout.cancel(timer);
});

这将在特定 Controller 的 View 关闭后取消该 Controller 的计时器。