title: Sequencing Events in Javascript
body: <p>I am trying to make a simple hidden object game using javascript. When the user finds and clicks an image, I want 3 things to happen in the following order; a sound plays, the image size increases, and the image goes invisible. The problem I am running into is getting the 3 events to happen sequentially, not concurrent. Right now, seems that all three events happen all at the same time.  </p>
  
  <p>I've tried using setTimeout(), and while that does create a delay, it still runs all functions at the same time, even if each function is nested in setTimeout. </p>
  
  <p>Example: (all this does is waits 1.5 sec then plays the sound and makes the image invisible):</p>
  
  <pre><code>function FindIt(image, id){
  var t = setTimeout('sound()',10);
  var b = setTimeout('bigger(' + image + ')',30);
  var h = setTimeout('hide(' + image + ')',1500);
  }
  </code></pre>
  
  <p>Below are the functions I am currently using and the actual results are: click the image, nothing happens for 2 seconds, then the sound plays and the image goes invisible. </p>
  
  <pre><code>function FindIt(image, id){
  sound();
  bigger(image);
  hide(image);
  }
  
  function sound(){
  document.getElementById("sound_element").innerHTML= "&lt;embed src='chime.wav' hidden=true    autostart=true loop=false&gt;";
  }
  
  function bigger(image){
  var img = document.getElementById(image);  
  img.style.width = 112;  
  img.style.height = 112;
  }
  
  
  function hide(id){
  var ms = 2000; 
  ms += new Date().getTime();
  while (new Date() &lt; ms){} //Create a 2 second delay
  var img = document.getElementById(id);
  img.style.visibility='hidden';
  }
  </code></pre>
  
  <p>Any guidance would be greatly appreciated!</p>