AngularJS executing jquery in controller multiple times

Question

I have done some javascript coding in my views controller.

The first time I visit the route it works as it's suppose to, but when I go to another route and go back to it, the javascript seems to be executing twice and the effect that I've done is messed up (doubled).

Here's the code that I have:

'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);
});

This is an animation where a string slides up (disappears) and then slides down as a different word. The first time it works nice, but after I visit the route again, the animation seems to speed up.

How can I fix this?

Thanks!

edit

I have done some changes:

'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);
});

the clearInterval doesn't seem to do anything.

solution

I've manage to figure it out:

'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);
  });

});

This:

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

does the trick.

Reference: https://stackoverflow.com/a/14238039/3632722

use $interval and $timeout angular service

santosh singh
– santosh singh

2016-01-05 13:31:00 +00:00
Commented Jan 5, 2016 at 13:31 — santosh singh
– santosh singh, Commented Jan 5, 2016 at 13:31

suvroc · Accepted Answer · 2016-01-05 12:36:55Z

0

Your problem is that you set one timer using setInterval and you don't destroy it at all. That's why when you set second timer it will be 2 timers executed asynchronously

You should reset timer after using it:

var myTimer = setInterval(myFn, 4000);

clearInterval(myTimer);

answered Jan 5, 2016 at 12:36

suvroc

3,0621 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Johhan Santana Over a year ago

Hi, I've tried your method, but it doesn't seem to be doing anything. I've edited the question with the changes

Denis Over a year ago

it's angular wrapper for js timers.

Denis · Accepted Answer · 2016-01-05 13:02:44Z

0

First of all all the DOM operations should be moved to directives according to documentation

Do not use controllers to:

Manipulate DOM — Controllers should contain only business logic.

Then, you should use $destroy event to remove timer. Here is plunker.

answered Jan 5, 2016 at 13:02

Denis

7474 silver badges13 bronze badges

1 Comment

Johhan Santana Over a year ago

ah, I see, I haven't done much with directives as I don't really understand how they work so well. I'll have to read more about it, but I figured an easier, faster way to do it for now would be with regular jquery/javascript in the controller. I've edited the question with the current(for now) solution.

Collectives™ on Stack Overflow

AngularJS executing jquery in controller multiple times

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related