title: How to delay a for loop execution in Javascript
body: <p>As the title states, I need to delay each iteration of a for loop.  Here is what I have found of several of Stack Overflow posts:</p>
  
  <pre><code>var my_event_num = $(this).data('eventnum');
  
  for (var i = 0; i &lt; motion_media[my_event_num].length; i++) {
      (function(index) {
          setTimeout(function() { 
              $("#slideshow-" + my_event_num).attr('src', 'motion-media/' + motion_media[my_event_num][index]) 
          }, 2000);
      })(i);
  }
  </code></pre>
  
  <p><code>motion_media</code> - an array of arrays. <code>my_event_num</code> - a valid pointer to an index in <code>motion_media</code>.</p>
  
  <p>However, this (and several other solutions) didn't work for me - it immediately executes the entire for loop with no timeout.  Would recursion be the way to go?  How could I implement such a solution?</p>