Javascript AngularJS在控制器中多次执行jquery

我已经在我的视图控制器中完成了一些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);
  });

});

这：

这就是诀窍

---

参考资料：

您的问题是，您使用

setInterval

设置了一个计时器，但根本没有销毁它。这就是为什么当您设置第二个计时器时，会有两个计时器异步执行

使用计时器后，应重置计时器：

var myTimer = setInterval(myFn, 4000);

clearInterval(myTimer);

---

首先，所有DOM操作都应该根据

不要使用控制器来：

操纵DOM-控制器应仅包含业务逻辑

---

然后，您应该使用

$destroy

事件删除计时器。是plunker。

嗨，我试过你的方法，但似乎没有任何效果。我已经用changesit的js timers角度包装编辑了这个问题。啊，我明白了，我对指令做得不多，因为我真的不明白它们是如何工作得这么好的。我必须阅读更多关于它的内容，但我认为现在更简单、更快的方法是在控制器中使用常规jquery/javascript。我已使用当前（目前）解决方案编辑了该问题。请使用$interval和$timeout

var myTimer = setInterval(myFn, 4000);

clearInterval(myTimer);