title: Alternating between nested setTimeout loops with different delays
body: <p>I'm setting up a browser-based cognitive psychology experiment that's similar to the game <a href="http://www.youtube.com/watch?v=KVzZVYtt64I" rel="nofollow noreferrer">Simon</a> (but without the '80s flair).</p>
  
  <p>Some php determines the sequence that will be displayed on a given trial and passes it to a JS array, where I'm running into two kinds of problems: (1) elegantly handling stimulus display, and (2) separating the "presentation" phase from the "recall" phase. Although I've found some helpful information on here about each half of this problem, integrating these two tasks has presented unique challenges that haven't been discussed here, to the best of my knowledge.  So here goes: </p>
  
  <p><strong>(1) Displaying the contents of an array one element at a time, using setTimeouts:</strong> </p>
  
  <p>This part of the code is functional, but I can't imagine that it's optimal.  Part of the complication is that the time interval is uneven: the stimulus appear for 700ms, but the gap before, between, and after them is 500ms.  (Annoying, but I can't help it.) Fortunately for me, there are never more than 5 things that need to be presented, so hard-coding the timestamps like that is at least an option, if not a good one.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;style&gt;
              body 
              {color:black}
  
              table
              {margin: 100px auto 0 auto;
               border: 1;
               text-align:center;
  
              }
              td
              {
              width: 100px;
              height:100px;
              vertical-align:middle;
              }
              tr:focus 
              { outline: none; }
  
          &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="displayStimuli()"&gt;
  
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td id="TopLeft"&gt;
  
              &lt;/td&gt;
              &lt;td id="TopMiddle"&gt;
  
              &lt;/td&gt;
              &lt;td id="TopRight"&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td id="MiddleLeft"&gt;
  
              &lt;/td&gt;
              &lt;td id="MiddleMiddle"&gt;
  
              &lt;/td&gt;
              &lt;td id="MiddleRight"&gt;
  
              &lt;/td&gt;
          &lt;tr&gt;
              &lt;td id="BottomLeft"&gt;
  
              &lt;/td&gt;
              &lt;td id="BottomMiddle"&gt;
  
              &lt;/td&gt;
              &lt;td id="BottomRight"&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
  
      var stimuli = new Array(1,2,3,4,"*");
      var cells = new Array("TopLeft", "TopRight", "BottomLeft", "BottomRight", "MiddleMiddle");
      var stimOn = new Array(500,1700,2900,4100, 5300) ; //this is a pretty unintelligent solution, but it works!
      var stimOff = new Array(1200,2400,3600,4800, 6000);
  
              function displayStimuli(){
  
      for (i=0; i&lt;stimuli.length; i++)
          {
  
              setTimeout(function (i) {return function(){
                  document.getElementById(cells[i]).innerHTML=stimuli[i];
                  };
              }(i),stimOff[i]);//when display the next one
  
              setTimeout(function (i) {return function(){
                  document.getElementById(cells[i-1]).innerHTML="";//There will be an error here because for the first item, i-1 is undefined. I can deal.
                  };
              }(i),stimOn[i]);//when to remove the previous one
          }
  
          //showRecall(); //see part (2)!
      } 
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>If anyone wants to come up with a nice way to clean that up, feel free!  However, my more vexing challenge (for now) is the next part. </p>
  
  <p><strong>(2) Waiting to call a function until the browser has <em>finished displaying</em> the end result of some previous setTimeout function.</strong></p>
  
  <p>Here I've found suggestions that might be partial solutions (e.g. <a href="https://stackoverflow.com/questions/16562221/javascript-nested-loops-with-settimeout">Javascript nested loops with setTimeout</a>), but I can't quite wrap my head around how to integrate them with my current design.  Here's what I <em>want</em> to happen, conceptually: </p>
  
  <pre><code>//php sends stimulus array (not including final "*") to js
  //js steps through the array, displaying and removing the pictures as above
  //after the browser has finished *displaying* the sitmuli in the loop, call a new js function, "recall()".
  //recall(){
  //this part is fairly straightforward
  //}
  </code></pre>
  
  <p>Some of the answers I've seen seem to suggest that this is possible with plain ol' js, while others insist that jQuery can solve the problem.  I'm open to both kinds of solutions, but haven't seen any that would be suitable for my situation, where the cue for executing the function isn't a certain timeout (since it will vary across trials of varying length), nor is it just a matter of waiting for the <em>code</em> to be processed, but rather of detecting when the browser is done <em>displaying</em> stuff.  </p>
  
  <p>Halp?</p>