Question

下午好，

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

目的

我想要做的是，在每个视图上设置一个计时器，所以如果互联网连接速度很慢，计时器会调用一个显示带有问题的ionicPopup的功能：＆＃34;你想刷新吗？观点？＆＃34;结合刷新按钮。单击该按钮时，视图将刷新。如果视图及时加载（我将计时器设置为10000毫秒），则会调用$ timeout.cancel操作并且计时器停止。

如果这就是全部，那么目前它将正常运作。

问题

如果我快速浏览主页，看起来计时器不会停止并且弹出＆＃34;刷新弹出＆＃34;弹出另一页。只有当您高速点击时才会发生这种情况。它看起来像一个弹出窗口一下子弹出。我不知道可能是什么问题，但我想如果你快速浏览页面，就不会调用$ 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('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

这里要注意的关键是：

如果我快速浏览主页，它看起来像计时器没有停下来＆＃34;刷新弹出＆＃34;弹出另一页。

当您浏览时，您的离子视图会被创建/销毁，因此您将失去对timer个对象的引用。

因此，在您使用计时器的控制器中，您必须在离开该页面之前使计时器无效。这是因为计时器是围绕JavaScript setTimeout和setInterval的包装器，而JavaScript具有方法级范围，它将方法作为参数传递给setInterval，它将保存对它的引用，而你的控制器被摧毁。因此，当您更改视图时，虽然您的控制器实例可能会被删除，但计时器不会。

在控制器中添加$ionicView.afterLeave个回调。

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

在取消该控制器的视图后，这将取消特定控制器的计时器。

Ionic：$ timeout操作即使被取消也正在执行

1 个答案: