AngularJS $timeout within for loop

Question

I'm trying to build a task processing type of SPA. The idea is There are 10 steps, The user clicks submit, then a service will be called to begin a process, and the UI will wait. Once it gets a response a style will be applied for success for failure. Anyhow, right now I'm trying to mock this behavior up and I can't seem to get my Angular correct, specifically with $timeout. Below is my code, and please excuse the simplified example I'm trying to understand Angular by working through it.

;function(angular) {
 'use strict'

  angular.module("workApp", [] )
    .controller ("TaskController", function ($routeParams, workService, $timeout, $scope) {
   var tc = this;

   // These will be used in the view to flip the CSS to the appropriate color for success or failure
   tc.step_0_status = "ready";
   tc.step_1_status = "ready";
   tc.step_2_status = "ready";

   // trying this out, by storing my functions in a array, b/c I will have other uses in the end for this array.
   var func_array = [
      function(){step_0},
      function(){step_1},
      function(){step_2}
    ]

  // This is where I am misunderstanding $timeout I guess. I simply want the loop to sleep for 3 seconds, before the next function is called.
  $scope.startTasks = function results() {
    for(var x = 0; x < func_array.length; x++) {
       **$timeout(func_array[x](),3000);**
    }

   }

  var step_0 = function() {
    tc.step_0_status = "running"
   }

  var step_1 = function() {
    tc.step_0_status = "completed";
    tc.step_1_status = "running";
   }

  var step_2 = function() {
    tc.step_1_status = "completed";
    tc.step_2_status = "failed";
   }


}
})(window.angular);

In this case you need use $interval, not timeout.

Haizhou Liu
– Haizhou Liu

2016-06-15 21:37:36 +00:00
Commented Jun 15, 2016 at 21:37 — Haizhou Liu
– Haizhou Liu, Commented Jun 15, 2016 at 21:37

pedrommuller · Accepted Answer · 2016-06-15 21:45:26Z

2

You can use a $interval to create the sleep method you want:

$interval(function(){
    // do wahetever you need here
    console.log('running');
},3000, func_array.length);

just make sure to destroy it properly after you have used it

answered Jun 15, 2016 at 21:45

pedrommuller

16.1k11 gold badges82 silver badges139 bronze badges

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

4 Comments

pedrommuller Over a year ago

nice, don't forget to mark it as an answer! I'm glad that wotked for you

Danman06 Over a year ago

Yep, and if I could freaking type to get my reply to show up as code.. :P Anyway, thanks. I'm really diggin Angular. I didn't know you could pass a object like that (func_array.length) to $interval. That's pretty sweet.

Danman06 Over a year ago

One more question, what is the proper way to destroy it?

pedrommuller Over a year ago

look at the documentation, there's an example there were the interval is destroyed in 2 scenarios but probably you'll need to implement this case: $scope.$on('$destroy', function() {})

Collectives™ on Stack Overflow

AngularJS $timeout within for loop

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related