AngularJS在控制器中多次执行jquery

Question

我在视图控制器中完成了一些 javascript 编码。

我第一次访问该路线时，它按预期工作，但是当我转到另一条路线并返回它时，javascript 似乎执行了两次，并且我所做的效果被搞砸了（加倍)。

这是我的代码：

'use strict'

angular.module('myApp')
.controller('FuncionesCtrl', function($scope) {
  $scope.viewName = 'Funciones';

  var count = 0;
  var array = [
    'identificada',
    'en espera',
    'entre tres'
  ];

  $('#teasers').html(array[0]);

  setInterval(function (){
    if(count == 2) {
        console.log('if');
        count = 0;
        $('#teasers').slideUp(500);
        setTimeout(function (){
            $('#teasers').html(array[count]);
        },500);
        $('#teasers').slideDown(500);
    } else {
        console.log('else');
        count ++;
        $('#teasers').slideUp(500);
        setTimeout(function (){
            $('#teasers').html(array[count]);
        },500);
        $('#teasers').slideDown(500);
    }
  }, 2000);
});

这是一个动画，其中字符串向上滑动（消失），然后作为不同的单词向下滑动。第一次效果不错，但我再次访问路线后，动画似乎加快了。

我该如何解决这个问题？

谢谢！

编辑

我做了一些改动：

'use strict'

angular.module('myApp')
.controller('FuncionesCtrl', function($scope, $interval) {
  $scope.viewName = 'Funciones';

  clearInterval(interval);

  var count = 0;
  var array = [
    'identificada',
    'en espera',
    'entre tres'
  ];

  $('#teasers').html(array[0]);

  var interval = setInterval(function (){
    if(count == 2) {
      console.log('if');
      count = 0;
      $('#teasers').slideUp(500);
      setTimeout(function (){
        $('#teasers').html(array[count]);
      },500);
      $('#teasers').slideDown(500);
    } else {
      console.log('else');
      count ++;
      $('#teasers').slideUp(500);
      setTimeout(function (){
        $('#teasers').html(array[count]);
      },500);
      $('#teasers').slideDown(500);
    }
  }, 2000);
});

clearInterval 似乎什么也没做。

解决方案

我已经弄明白了：

'use strict'

angular.module('myApp')
.controller('FuncionesCtrl', function($scope, $interval) {
  $scope.viewName = 'Funciones';

  // clearInterval(interval);

  var count = 0;
  var array = [
    'identificada',
    'en espera',
    'entre tres'
  ];

  $('#teasers').html(array[0]);

  var interval = $interval(function (){
    if(count == 2) {
      console.log('if');
      count = 0;
      $('#teasers').slideUp(500);
      setTimeout(function (){
        $('#teasers').html(array[count]);
      },500);
      $('#teasers').slideDown(500);
    } else {
      console.log('else');
      count ++;
      $('#teasers').slideUp(500);
      setTimeout(function (){
        $('#teasers').html(array[count]);
      },500);
      $('#teasers').slideDown(500);
    }
  }, 2000);

  $scope.$on('$destroy', function (e){
    $interval.cancel(interval);
  });

});

这个：

$scope.$on('$destroy', function (e){
  $interval.cancel(interval);
});

成功了。

参考：https://stackoverflow.com/a/14238039/3632722

Answer 1

您的问题是您使用setInterval 设置了一个计时器并且您根本没有销毁它。这就是为什么当您设置第二个计时器时，它将是 2 个异步执行的计时器

你应该在使用后重置计时器：

var myTimer = setInterval(myFn, 4000);

clearInterval(myTimer);

Answer 2

首先所有的DOM操作都应该根据documentation移动到指令中

不要使用控制器来：

操纵 DOM — 控制器应该只包含业务逻辑。

然后，您应该使用$destroy 事件来删除计时器。 Here 是笨蛋。