title: multiple setTimeout calls within a for loop
body: <p>I'm trying to code the game Simon in HTML/JS and it's all working, except for the part where the game flashes the sequence so you know what the new sequence is. Essentially what I have is:</p>
  
  <pre><code>for(var i in thePattern){
      var obj = document.getElementById(thePattern[i]);
      window.setTimeout(colorON(obj),500);
      window.setTimeout(colorOFF(obj),1000);
  }
  </code></pre>
  
  <p>where colorON and colorOFF are:</p>
  
  <pre><code>function colorON(obj){
      if(obj.id == "red"){
          obj.style.backgroundColor="#ff5555";
      }else if(obj.id == "blue"){
      obj.style.backgroundColor="#5555ff";
      }else if(obj.id == "green"){
      obj.style.backgroundColor="#88ff88";
      }else{
      obj.style.backgroundColor="#ffffaa";
      }
  }
  function colorOFF(obj){
      if(obj.id == "red"){
          obj.style.backgroundColor="#ff0000";
      }else if(obj.id == "blue"){
          obj.style.backgroundColor="#0000ff";
      }else if(obj.id == "green"){
          obj.style.backgroundColor="#22ff22";
      }else{
          obj.style.backgroundColor="#ffff00";
      }
  }
  </code></pre>
  
  <p>What it seems to be doing is going through the entire for loop and starting all the timers and then then all the timers go off so quickly that the colors don't even seem to flash.</p>
  
  <p>Any ideas? All help is greatly appreciated.</p>
  
  <hr>
  
  <p>Now it is flashing correctly and the closure is working correctly, but it is flashing all the colors at the same time. I've tried putting the closure within another <code>setTimeout</code>, however, that just creates other problems.</p>
  
  <hr>
  
  <p><strong>SOLVED</strong> thanks for your help guys.</p>