Question

在我的Angular应用程序中，我有第1页和第2页。

第1页基本上是主页，其中的按钮链接到第2页。

第1页有一个名为 Page1App 的角应用程序和一个名为 Page1Ctrl 的控制器。第2页有一个名为 Page2App 的角度应用程序和一个名为 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 up - 如果您在第2页上，则可以，但如果您已经离开第2页则不行。

当用户离开时，如何停止播放所有内容？

Answer 1

您可以侦听范围销毁事件侦听器并清除超时。

代表：

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

检查DOC $destroy范围事件。

点击后退按钮后停止角度$ timeout计时器

1 个答案: