title: javascript delay between function calls for each index in an array
body: <h2>The Goal:</h2>
  
  <ul>
  <li>Execute logic on each element in array.</li>
  <li>Wait <code>X</code> ms in between next execution.</li>
  <li><code>mouseover(#slider)</code> pauses delay - If delay = 1000ms, and 300ms had passed, <code>mouseout(#slider)</code> would trigger resume counting down the remaining 700ms delay.</li>
  <li>After execution on last element, loop back to do it again - forever.</li>
  </ul>
  
  <p><strong>Here's a visual explanation:</strong></p>
  
  <pre><code>var = s Array(1,2,3)
  
  var x = s[1];   //get first element   
  console.log(x); //do something to it
  wait();         //START wait timer 1000ms
  
  //------------&gt; timer : 300ms
  //------------&gt; user  : mouseover (#slider) : pause timer
  //------------&gt; user  : waited 5000ms
  //------------&gt; user  : mouseout  (#slider) : resume timer
  //------------&gt; timer : 300ms --&gt; still 700ms to go!
  //------------&gt; timer : 500ms
  //------------&gt; user  : mouseover (#slider) : pause timer
  //------------&gt; user  : waited 10000ms
  //------------&gt; user  : mouseout  (#slider) : resume timer
  //------------&gt; timer : 500ms --&gt; still 500ms to go!
  
  var x = s[2];   //get second element   
  console.log(x); //do something to it
  wait();         //START wait timer 1000ms
  
  //------------&gt; timer : 200ms
  //------------&gt; user  : mouseover (#slider) : pause timer
  //------------&gt; user  : onclick   (.slideButton1) : change index of array and clear timer
  //------------&gt; user  : waited 6000ms
  //------------&gt; user  : mouseout  (#slider) : resume timer
  //------------&gt; timer : 0ms --&gt; still 1000ms to go!
  
  var x = s[1];   //get first element   ( index was changed by clicking button )
  console.log(x); //do something to it
  wait();         //START wait timer 1000ms
  
  // ... s[2] ... s[3] ...
  //theres nothing else in the array, lets start back from s[1] again!
  </code></pre>
  
  <h2>Solutions:</h2>
  
  <p><strong>jQuery:</strong></p>
  
  <p><a href="http://jsfiddle.net/zGd8a/8/" rel="nofollow noreferrer">http://jsfiddle.net/zGd8a/8/</a></p>
  
  <p>This solution came from a related <a href="https://stackoverflow.com/questions/13002674/jquery-each-index-when-passed-self"><strong>post</strong></a>. The official source of this plugin can be found <a href="http://roxon.in/scripts/fademe_jquery_plugin/" rel="nofollow noreferrer"><strong>here</strong></a>.</p>
  
  <p><strong>Native JS:</strong></p>
  
  <p><a href="http://jsfiddle.net/SyTFZ/4/" rel="nofollow noreferrer">http://jsfiddle.net/SyTFZ/4/</a></p>
  
  <p>This <strong><a href="https://stackoverflow.com/questions/12926531/javascript-recursive-loop-through-array-with-delay-between-elements#12926811">Answer</a></strong> by <strong><a href="https://stackoverflow.com/users/783743/aadit-m-shah">Aadit M Shah</a></strong> was really helpful. He also goes into detail about <strong>Delta Timing</strong> and how it can be useful in similar cases.</p>
  
  <h2>New Goal:</h2>
  
  <p>Abstract up either of these methods to allow use for other things.</p>