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

首先，应根据documentation

将所有DOM操作移至指令

请勿使用控制器：

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

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

AngularJS多次在控制器中执行jquery

2 个答案: