Angularjs和Jquery：Angularjs路由和jquery脚本执行问题

Question

我尝试使用angularjs和jquery来开发我的网站，我不是新手。但不知怎的，我偶然发现了一个对我来说不太熟悉的问题。

主要问题是角度路由和jquery文件准备好的脚本执行之间。

场景是我使用angularjs ui-router浏览我网站的页面（SPA）我的一个页面有内联jquery代码看起来像这样

<div id="details-page">

</div>

<script>
    var counter = 0;

    function foo() {
        var setFoo = setInterval(function() {
            counter++;
            console.log(counter);
        }, 2000);
    }
</script>

foo();

代码按预期运行，但当我去另一个页面时，我可以看到我的日志仍在运行（foo函数），这对我来说似乎很奇怪，但这不是主要问题，主要问题是当我回到“详细信息 - 页面“函数foo被执行回来了（因为$（document）.ready（function（）{}））所以两个foo在我的系统中运行，它肯定会破坏所有东西。

所以我的目标是如何停止旧的foo函数或如何停止新函数foo执行简短我只想在我的系统中运行一个foo函数，谢谢

Answer 1

如果我理解正确，你希望这个计数器在用户输入“详细信息页面”时启动，你希望它们在离开时继续运行，当它们返回时它必须使用原始计数器。

要使用AngularJS解决此问题，您应该创建一个服务，因为您的服务将是一个单独的服务，而不是专门与“详细信息页面”链接。

小提琴示例：https://jsfiddle.net/UncleDave/g9co2172/1/

angular
  .module('app', [])
  .controller('DetailsCtrl', function(counterService) {
    counterService.start();
  })
  .service('counterService', function($interval) {
    var counter = 0;
    var started = false;

    function start() {
      if (started)
        return;

      started = true;

      $interval(function() {
        counter++;
        console.log(counter);
      }, 2000);
    }

    return {
      start: start
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="DetailsCtrl as details">
</div>

Answer 2

只需在控制器中添加此代码，不要忘记在控制器中注入$rootScope和$interval服务。

$rootScope.counter = 0;
var setFoo;

function foo() {
    setFoo = $interval(function () {
        $rootScope.counter++;
        console.log($rootScope.counter);
    }, 2000);
}

foo();

$rootScope.$on("$routeChangeStart", function () {
    $interval.cancel(setFoo);
})