Running a loop in the background in Angular

Question

Not certain what options I have, I want to run a loop within a controller that runs in the background and steps every n'th milli seconds, it will just change the colour on a button, want it to go from green to orange and then back using ng-style.

What is a sensible approaches to running a loop in the background, for obvious reasons I would like to avoid locking up the whole page just to have a button changing colour.

I would really want to thank for everyones input. In this particular case, I wanted to use angular if possible, as there is quite a few things that needs to happen on the angular front and the animations will eventually be dependent on code in angular. Besides I want to get better at that framework. Certain all the other solutions works as well. — vrghost
– vrghost, Commented Apr 19, 2015 at 4:36

William Gaul · Accepted Answer · 2015-04-18 20:16:22Z

4

Since you're using Angular, you should use the Angular solution: $interval.

A simple example, assuming you're using a boolean in the scope to determine whether the button is green or orange:

angular.module('myApp', [])
    .controller('myController', ['$scope', '$interval',
        function($scope, $interval) {
            $scope.isGreen = true;

            $interval(function() {
                $scope.isGreen = !$scope.isGreen;
            }, 1000);
        }
    ]);

This will toggle $scope.isGreen every second.

edited Apr 18, 2015 at 20:16

answered Apr 18, 2015 at 20:09

William Gaul

3,1812 gold badges18 silver badges22 bronze badges

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

1 Comment

user4695271 Over a year ago

Damn right! If using AngularJS $interval is the way to go

Aviv Shaked · Accepted Answer · 2015-04-18 20:14:41Z

I think perhaps a css option might be the way to go here. You can loop animation in css.

Keyframe Animation Syntax

Here's an example

@-webkit-keyframes looping-background {
  0%   { background-color: orange; }
  50% { background-color: green; }
  100% { background-color: orange; }
}
@-moz-keyframes looping {
  0%   { background-color: orange; }
  50% { background-color: green; }
  100% { background-color: orange; }
}
@-o-keyframes looping {
  0%   { background-color: orange; }
  50% { background-color: green; }
  100% { background-color: orange; }
}
@keyframes loopingN {
  0%   { background-color: orange; }
  50% { background-color: green; }
  100% { background-color: orange; }
}

.loop_animation {
  -webkit-animation: looping-background 2s infinite; /* Safari 4+ */
  -moz-animation:    looping-background 2s infinite; /* Fx 5+ */
  -o-animation:      looping-background 2s infinite; /* Opera 12+ */
  animation:         looping-background 2s infinite; /* IE 10+, Fx 29+ */
}

<button class="loop_animation">I am a button</button>

Dave Jones · Accepted Answer · 2015-04-18 20:07:26Z

1

Use a javascript event timer to call a function.

https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers

answered Apr 18, 2015 at 20:07

Dave Jones

3441 silver badge7 bronze badges

Comments

Shelly · Accepted Answer · 2015-04-18 20:12:03Z

1

why dont u you use

setTimeout(function(){
                          // change the color of button here
                          }),n*1000);

this set time out should be called in recursive loop .

<body onload = "changeButtonColor()">

<script>
function(){
         // change the color here 
         setTimeout(function(){
                          // change the color of button here
                          }),n*1000);
         }
</script>

answered Apr 18, 2015 at 20:12

Shelly

3531 silver badge7 bronze badges

Collectives™ on Stack Overflow

Running a loop in the background in Angular

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related