如何在路由更改后停止 setInterval 函数在角度指令上执行

Question

我正在通过指令将画廊放入页面。画廊使用 javascript 在图像之间来回解析（我计划使用 css 转换来旋转通过一组类）。

我想要一个 setInterval 函数执行，但只有当指令在页面上时（也就是说只有在调用某个路由时）。但是，即使点击了新路由，并且在我的页面上呈现了新视图，现有功能仍在执行。例如：

指令：

angular.module('app')
  .directive('gallery', function ($location) {
    return function (scope, element, attrs) {
      setInterval(function () {
        //This is where I would change the classes on the element
        //This will continually execute, even when on a different view
      }, 500);
    }
  });

HTML 视图

<div gallery>
    Something special
</div>

有没有什么办法让我只在指令在页面上时执行间隔函数？

Answer 1

您可以取消$destroy 事件的间隔。

var intervalPromise = $interval(function() {
  // do your operation
}, 500);

element.on('$destroy', function() {
   $interval.cancel(intervalPromise);
});

这里是文档的链接：https://docs.angularjs.org/guide/directive

Answer 2

你应该使用 $interval:-

    var promise=$interval(function () {

    }, 500);
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 

        if(next!=current)
            $interval.cancel(promise);

    });

或者如果你使用 setInterval:-

var promise=setInterval(function () {
      }, 500);
$rootScope.$on("$locationChangeStart", function(event, next, current) { 

        if(next!=current)
           clearInterval(promise);

    });