# You have three basic options:


1. **For Loop + `setTimeout`**  
   ... initialize everyone immediately, but stagger the start times based on the index position so they don't all go at the same time.
2. **<code>set<i>Timeout</i></code> + conditional recursion**  
   ... check back in every *n* seconds - and I'll tell you if you need to do another
3. **<code>set<i>Interval</i></code> + conditional `clearInterval`**   
   ... keep running every *n* seconds - until I tell you to stop

Here's each one of those fleshed out with a working example:


### 1. For Loop + `setTimeout`

A couple notes on this one.  This is kind of like starting a relay race and handing out instructions ahead of time to each runner to start at precisely 5:00 and 5:02 and 5:04, regardless of whether the person behind them finished a long time ago or hasn't yet arrived.

Also, you can't use a regular `for i=0 loop`, because the for operator does not define new function scope.  Thus object values set within each for loop will apply across iterations.  By the time setTimeout is called, it will only use the most recent value.  So we need a closure to store the value within each loop. I've used [`Array.prototype.forEach()`][fe], but if you want to use the forEach implementations in jQuery or Underscore, that'll work too.





    function ArrayPlusDelay(array, delegate, delay) {
     
      // initialize all calls right away
      array.forEach(function (el, i) {
        setTimeout(function() {
            // each loop, call passed in function
            delegate( array[i]);
    
          // stagger the timeout for each loop by the index
          }, i * delay);
      })
     
    }
    
    // call like this
    ArrayPlusDelay(['a','b','c'], function(obj) {console.log(obj)},1000)



### 2. `setTimeout` + conditional recursion

For the bottom two options, we're making our own loops, so we'll have to keep track of the index ourselves, initializing at zero and incrementing throughout.  

For this one, we'll a) call [`setTimeout`][st] which will run once, b) evaluate the array at the index position, c) check if there are more elements in the array and if so, start over at (a).





   
    function ArrayPlusDelay(array, delegate, delay) {
      var i = 0
      
      function loop() {
      	  // each loop, call passed in function
          delegate(array[i]);
          
          // increment, and if we're still here, call again
          if (i++ < array.length - 1)
              setTimeout(loop, delay); //recursive
      }

      // seed first call
      setTimeout(loop, delay);
    }

    // call like this
    ArrayPlusDelay(['d','e','f'], function(obj) {console.log(obj)},1000)






### 3. `setInterval` + conditional `clearInterval`

**NOTE**: The function [`setInterval`][si] will run forever once called.  It's return value when initially set will provide a reference to the interval, so it is often combined with the function [`clearInterval`][ci] to optionally shut it off down the road





    function ArrayPlusDelay(array, delegate, delay) {
      var i = 0
      
       // seed first call and store interval (to clear later)
      var interval = setInterval(function() {
        	// each loop, call passed in function
          delegate(array[i]);
          
            // increment, and if we're past array, clear interval
          if (i++ >= array.length - 1)
              clearInterval(interval);
      }, delay)
      
    }

    ArrayPlusDelay(['x','y','z'], function(obj) {console.log(obj)},1000)



------

### 3* Secret Fourth Option (Best One)

Options 1 & 2 are risky because, once you set off that train, there's no way to call it off down the road (save closing the browser).  If you have a large array or a heavy load in your delegate, it might be nice to provide some recourse if  you need it.  By saving the reference from `setInterval`, we'll have constant access to the iterating function.  We just need to return the interval object above and save it when calling our array plus delay function.





    function ArrayPlusDelay(array, delegate, delay) {
      var i = 0
      
       // seed first call and store interval (to clear later)
      var interval = setInterval(function() {
        	// each loop, call passed in function
          delegate(array[i]);
          
            // increment, and if we're past array, clear interval
          if (i++ >= array.length - 1)
              clearInterval(interval);
      }, delay)
      
      return interval
    }

    var inter = ArrayPlusDelay(['x','y','z'], function(obj) {console.log(obj)},1000)



Then if we ever want to clear it later on, just throw this in the console:



    clearInterval(inter);

### [All 3 Demos in jsFiddle][fiddle]

### Similar Stack Overflow Questions:

* [Using settimeout() with a loop][SO1]
* [Stepping through array with time delay][SO2]
* [Loop over array but with a time delay][SO3]



[fe]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
[st]:https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
[si]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
[ci]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

[fiddle]: https://jsfiddle.net/KyleMit/8qe7422x/

[SO1]: https://stackoverflow.com/q/17246275/1366033
[SO2]: https://stackoverflow.com/q/5913034/1366033
[SO3]: https://stackoverflow.com/q/10965285/1366033

I'm confused with using setTimeout and the each iterator.  How can I rewrite the following so that the console outputs each name after a delay of 5 seconds?  Currently the code below prints all the names at once after 5 seconds.  I would like to:

1) wait 5 seconds, then print kevin  
2) wait 5 seconds, then print mike  
3) wait 5 seconds, then print sally  


    var ary = ['kevin', 'mike', 'sally'];

    _(ary).each(function(person){
    
      setTimeout(function(){
        console.log(person);
      }, 5000);    
    
    });

setTimeout and array each

I'm assuming it's the case that you're only using `tempPtr` to access the looped element in each loop.  If that's the case, you can use [**`.filter`**](http://api.jquery.com/filter/) on `$(this)` instead.

Try this:



    $( ".inputQuantityUpdate" ).each(function( index ) {
        completed = $(this).filter(":input[type='text']:first").val();
        nc = $(this).filter(":input[type='text']:first").next().val();
        if (nc == "NC") nc = 0;
        $(this).parent().remove();
    });

I've always used a `tempClass` to iterate through something and select first child text input. I am having weird issues with this now. I've looked off and on to with no success to find the proper way to do this.

**Code Snippet**

    $( ".inputQuantityUpdate" ).each(function( index ) {
        $(this).addClass("tempPtr");
        completed   = $(".tempPtr :input[type='text']:first").val();
        nc          = $(".tempPtr :input[type='text']:first").next().val();
        if(nc == "NC")nc = 0;
        $(this).removeClass("tempPtr");
        $(this).parent().remove();
    });
            
My problem is nc and completed is correct for the first iteration, but not after.
For some reason this isn't working. What would be the best way to tackle this?

Update:
The marked solution worked. I should have posted the other fields I am grabbing because they aren't working. This set of routines works when only 1 element "inputQuantityUpdate" is in the iteration. It blows up when there are multiple. I have a feeling this is some sort of memory issue/syntax misuse on my part. What is the best way to do this if there is data stored in the element like:

    function updatesConfirmed(){
            $("#confirmInputValues").remove();
            $( ".inputQuantityUpdate" ).each(function( index ) {
                job         = $(this).data("job");
                suf         = $(this).data("suff");
                op          = $(this).data("op");
                completed   = $(":input[type='text']:first", this).val();
                nc          = $(":input[type='text']:first", this).next().val();
                if(nc == "NC")nc = 0;
                $(this).parent().remove();
            });
        }