# 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

By way of explanation, a lot of answers are going to point out the fact that most browsers **run JavaScript on the UI thread**, so they cannot update the interface when JavaScript is being executed.  Instead, the browser will [wait for the Javascript to finish and return control to the UI thread][1].

While this is important to keep in mind, it doesn't come into play for your code.  If you were updating the progress bar doing something like this:

    for (i = 0; i < len; i++) {
        updateProgressBar(i)
    };

Then it would definitely prevent the UI from updating until the end.  

But you're already doing the right thing by using [`setTimeout`][2] or [`setInterval`][3], which have asynchronous callbacks into the code.  Meaning that the JavaScript is able to pause for long enough to pipe out any UI messages.  As evidenced by the fact that the text is able to update dynamically.

As your question asks, why, if the UI is getting updated, is the progress bar not updated as well?

The answer lies in the fact that [Bootstrap applies the following CSS][4] to the [progress bar][5]:



    .progress-bar {
      -webkit-transition: width .6s ease;
           -o-transition: width .6s ease;
              transition: width .6s ease;
    }

When the delay between calls is 0ms, the browser **does** have time to update the UI, but **does not** have time to complete the 600ms CSS transition.  Consequently, you don't see the animation until the end.

As [OhAuth points out][6], you can prevent the browser from delaying the width update by removing the transition effect with CSS like this:



    .progress .progress-bar {
      -webkit-transition: none;
           -o-transition: none;
              transition: none;
    }

If you're looping through a lot of items, the incremental updates will provide some sort of animation.  If you wanted to leave on the styling for a generic use case, you could toggle the transitions off and on in your code.  As of [jQuery 1.8 you can update CSS properties without the vendor prefix][7], so you'd just need to call `.css("transition","none")`.

Of course, depending on how much work you're doing for each movie, the JavaScript may be able to finish before you can visually detect all of the UI changes, in which case extending the delay wouldn't hurt.  If you'd like to test out longer running processes, you can use the following [sleep function][8]:



    function sleep(sleepyTime) {
      var start = +new Date;
      while (+new Date - start < sleepyTime){}
    }

Here's a demo you can play around where each setting is a variable that you can configure to see how it would react, but the best bet is just to conditionally remove transitions.

### Demo in Stack Snippets





    var delay, numMovies, throttledMovies, sleepTime, removeTransition;

    $("#delay").change(function(){ delay = this.value }).change()
    $("#movies").change(function(){ numMovies = this.value }).change()
    $("#sleep").change(function(){ sleepTime = this.value }).change()
    $("#transition").change(function(){ removeTransition = this.checked }).change()

    $("#loadMovies").click(loadMovies);

    function loadMovies() {
      var i = 0;
      
      throttledMovies = Movies.slice(0, numMovies)
      
      if (removeTransition) {
        $('#progress-bar-movie').css("transition","none");
      }
      
      var interval = setInterval(function () {
        loadMovie(i)

        if (++i >= numMovies) {
          clearInterval(interval);
          $('#progress-bar-movie').css("transition","width .6s ease");
        }
      }, delay);
    };

    function loadMovie(i) {
      var movie = throttledMovies[i];
      var percentComplete = ((i + 1) / numMovies) * 100;

      sleep(sleepTime);
      
      // update text
      $("#procNum").text("(" + (i + 1) + "/" + numMovies + ")");
      $("#procMovie").text(movie.Title); 

      // update progress bar
      $('#progress-bar-movie')
        .css('width', percentComplete+'%')
        .attr('aria-valuenow', percentComplete);
    };

    function sleep(sleepyTime) {
      var start = +new Date;
      while (+new Date - start < sleepyTime){}
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="http://kylemitofsky.com/libraries/libraries/movies.js"></script>

    
    <label for="delay">Delay (ms)</label>
    <input type="number" value="0" min=0 max=1000 id="delay"/>
    <label for="movies"># Movies </label>
    <input type="number" value="250" min=0 max=250 id="movies"/>
    <label for="sleep">Sleep time (ms)</label>
    <input type="number" value="0" min=0 max=1000 id="sleep"/>
    <label for="transition">Remove transition? </label>
    <input type="checkbox" checked="true" id="transition"/><br/><br/>

    <button class="btn btn-primary btn-lg" id="loadMovies">
      Load Movies
    </button><br/><br/>

    <p>
      <b>Current Title</b>: <span id="procMovie"></span><br/>
      <b>Progress</b>: <span id="procNum"></span>
    </p>

    <div class="progress">
      <div class="progress-bar" role="progressbar" id="progress-bar-movie" 
           aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>





[1]: https://stackoverflow.com/a/5743526/1366033
[2]: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
[3]: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
[4]: https://github.com/twbs/bootstrap/blob/master/less/progress-bars.less#L46
[5]: http://getbootstrap.com/components/#progress
[6]: https://stackoverflow.com/a/30321740/1366033
[7]: http://www.richardfawcett.net/demos/jquery_1.8.0_testing.html
[8]: http://www.phpied.com/css-animations-off-the-ui-thread/

I'm dynamically updating a few elements after a `setTimeout()` function. The jQuery function `.text()` seems to dynamically update with each change of index of an array while processing. But a bootstrap progressbar which is being changed through `.css()` and `.attr()` doesnt seem to dynamically update. Here is my page : [http://imdbnator.com/process.php?id=f144caf0843490c0d3674113b03da0c5&redirect=false][1]

You can see that the text gets changed but the progress bar only finishes after the whole `setTimeout()` function finishes. Also, if I set the `delay = 1000`. It works. But it slows down by application. Therefore, I need `delay = 0`. But why doesnt the progressbar change?

Here is my snippet

    function launch(a) {
        var inc = 0;
        var maxc = a.length;
        var delay = 0; // delay milliseconds
        var iID = setInterval(function () {    
            var index = inc;
            var movie = a[inc];    
            //start processing function    
            //styling while processing                
            var markerPer = ((index + 1) / rawListNum) * 100; // marker percentage
            $("#procNum").text("(" + (index + 1) + "/" + rawListNum + ")"); //Processing number
            $("#procMovie").text(movie); //Processing Name
            $("div[role='progressbar']").css("width", markerPer + "%").attr("aria-valuenow", markerPer); // progress bar -> DOES NOT WORK    
            if (++inc >= maxc) clearInterval(iID);    
        },
        delay);
    }

  [1]: http://imdbnator.com/process.php?id=f144caf0843490c0d3674113b03da0c5&redirect=false

Why doesn't Progress Bar dynamically change unlike Text?

You can also implement your own debounce in vanilla JavaScript. A widely quoted article is David Walsh's article on [function debouncing with underscore][1] which includes the source code used by underscore in their implementation:

```js
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};
```

The debounce function serves as a generator for the actual function you'd like to call, that way the state can be persisted inside of the closure like this:

```js
// example function
let sayHello = (name) => console.log(`Hi ${name}`)

// generate a debounced version with a min time between calls of 2 seconds
let sayHelloDebounced = debounce(sayHello, 2000)

// call however you want
sayHelloDebounced('David')
```

### Demo in Stack Snippets





    function debounce(func, wait, immediate) {
    	var timeout;
    	return function() {
    		var context = this, args = arguments;
    		var later = function() {
    			timeout = null;
    			if (!immediate) func.apply(context, args);
    		};
    		var callNow = immediate && !timeout;
    		clearTimeout(timeout);
    		timeout = setTimeout(later, wait);
    		if (callNow) func.apply(context, args);
    	};
    };

    let sayHello = (name) => console.log(`Hi ${name}`)

    let sayHelloDebounced = debounce(sayHello, 2000)

    sayHelloDebounced('David')
    sayHelloDebounced('David')
    sayHelloDebounced('David')






### Other Implementations

* [Underscore Docs][2] | [Underscore Source][3]
* [Lodash Docs][4] | [Lodash Source][5]
* [30 Seconds of Code][6]


[1]: https://davidwalsh.name/function-debounce
[2]: https://underscorejs.org/#debounce
[3]: https://github.com/jashkenas/underscore/blob/1.10.2/modules/index.js#L884-L911
[4]: https://lodash.com/docs/4.17.15#debounce
[5]: https://github.com/lodash/lodash/blob/4.17.15-npm/debounce.js#L66-L87
[6]: https://www.30secondsofcode.org/js/s/debounce

I understand that `debounce` in Undercore.js returns a function that will postpone its execution until the wait time is over.

My question is, is there an advantage of using `debounce` over the regular `setTimeout` function in vanilla Javascript? Don't they both work the same?