点击后退按钮后停止 angular $timeout 计时器
Stop angular $timeout timer after hitting back button
在我的 Angular 应用程序中,我有第 1 页和第 2 页。
第 1 页 基本上是带有链接到第 2 页的按钮的主页。
第 1 页有一个名为 Page1App 的 angular 应用程序和一个名为 Page1Ctrl 的控制器。
第 2 页有一个名为 Page2App 的 angular 应用程序和一个名为 Page2Ctrl.
的控制器
Page1App 有 Page2App 作为依赖项。
angular.module('Page1App', ['Page2App']);
在第 2 页中,有一个计时器,其工作方式与 this JSFiddle 中的计时器相同(代码复制如下)
$scope.nextPic = function() {
$timeout.cancel(picTimeout)
if (++$scope.picIndex >= $scope.pics.length) $scope.picIndex=0
picTimeout = $timeout($scope.nextPic, 2000)
}
$scope.prevPic = function() {
$timeout.cancel(picTimeout)
if (--$scope.picIndex < 0 ) $scope.picIndex=$scope.pics.length-1
picTimeout = $timeout($scope.nextPic, 2000)
}
picTimeout = $timeout($scope.nextPic, 2000)
问题是,当我从第2页回到第1页时,计时器继续运行背景,偶尔会弹出一个 alert
- 如果您在第 2 页,则可以,但如果您已经离开第 2 页,则不行。
如何让第 2 页中的所有内容在用户离开时停止?
您可以侦听 scope destroy 事件侦听器并清除超时。
例如:
$scope.$on('$destroy', function() {
$timeout.cancel(picTimeout);
});
检查范围的 $destroy
事件的 DOC。
在我的 Angular 应用程序中,我有第 1 页和第 2 页。
第 1 页 基本上是带有链接到第 2 页的按钮的主页。
第 1 页有一个名为 Page1App 的 angular 应用程序和一个名为 Page1Ctrl 的控制器。 第 2 页有一个名为 Page2App 的 angular 应用程序和一个名为 Page2Ctrl.
的控制器Page1App 有 Page2App 作为依赖项。
angular.module('Page1App', ['Page2App']);
在第 2 页中,有一个计时器,其工作方式与 this JSFiddle 中的计时器相同(代码复制如下)
$scope.nextPic = function() {
$timeout.cancel(picTimeout)
if (++$scope.picIndex >= $scope.pics.length) $scope.picIndex=0
picTimeout = $timeout($scope.nextPic, 2000)
}
$scope.prevPic = function() {
$timeout.cancel(picTimeout)
if (--$scope.picIndex < 0 ) $scope.picIndex=$scope.pics.length-1
picTimeout = $timeout($scope.nextPic, 2000)
}
picTimeout = $timeout($scope.nextPic, 2000)
问题是,当我从第2页回到第1页时,计时器继续运行背景,偶尔会弹出一个 alert
- 如果您在第 2 页,则可以,但如果您已经离开第 2 页,则不行。
如何让第 2 页中的所有内容在用户离开时停止?
您可以侦听 scope destroy 事件侦听器并清除超时。
例如:
$scope.$on('$destroy', function() {
$timeout.cancel(picTimeout);
});
检查范围的 $destroy
事件的 DOC。