title: javascript setTimeOut - not running on nested setTimeout
body: <p>Okay, I seem to be having a problem. I'm trying to create a twicker to display rows of data. I'm using jquery/javascript to hide and show rows after a certain time. Here's the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="jquery-1.3.2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;script&gt;
  var timer_is_on=0;
  
  function doTimer()
  {
      if (!timer_is_on)
      {
          timer_is_on=1;
          t=setTimeout("timedCount()",5000);
      }
  }
  
  function hide(hideMe) {
      var elem='';
      elem = elem.concat("#").concat(hideMe);
      $(elem).filter(":visible").hide("slow");    
  }
  
  function show(showMe) {
      var elem='';
      elem = elem.concat("#").concat(showMe);
      $(elem).show("slow");   
  }
  
  function timedCount() {
      $(document).ready(function() {
          if( $("#twitRow1").is(":visible")){
              var th1 = setTimeout(function () {hide("twitRow1")},1000);
              var ts1 = setTimeout(function () {show("twitRow2")},1000);
          } else  if( $("#twitRow2").is(":visible")){
              var th2 = setTimeout(function () {hide("twitRow2")},1000);
              var ts2 = setTimeout(function () {show("twitRow3")},1000);
          } else  if( $("#twitRow3").is(":visible")){
              var th3 = setTimeout(function () {hide("twitRow3")},1000);
              var ts3 = setTimeout(function () {show("twitRow4")},1000);
          } else  if( $("#twitRow4").is(":visible")){
              var th4 = setTimeout(function () {hide("twitRow4")},1000);
              var ts4 = setTimeout(function () {show("twitRow5")},1000);
          } else  if( $("#twitRow5").is(":visible")){
              var th5 = setTimeout(function () {hide("twitRow5")},1000);
              var ts5 = setTimeout(function () {show("twitRow6")},1000);
          } else  if( $("#twitRow6").is(":visible")){
              var th6 = setTimeout(function () {hide("twitRow6")},1000);
              var ts6 = setTimeout(function () {show("twitRow7")},1000);
          } else  if( $("#twitRow7").is(":visible")){
              var th7 = setTimeout(function () {hide("twitRow7")},1000);
              var ts7 = setTimeout(function () {show("twitRow8")},1000);
          } else  if( $("#twitRow8").is(":visible")){
              var th8 = setTimeout(function () {hide("twitRow8")},1000);
              var ts8 = setTimeout(function () {show("twitRow9")},1000);
          } else  if( $("#twitRow9").is(":visible")){
              var th9 = setTimeout(function () {hide("twitRow9")},1000);
              var ts9 = setTimeout(function () {show("twitRow1")},1000);
          }
      });
      t=setTimeout("timedCount()",5000);
  }
  
  &lt;/script&gt;
  
  &lt;div id="myDivTable"&gt;
  
      &lt;div id="twitRow1"&gt;Row 1&lt;/div&gt;
      &lt;div id="twitRow2" style="display: none;"&gt;Row 2&lt;/div&gt;
      &lt;div id="twitRow3" style="display: none;"&gt;Row 3&lt;/div&gt;
      &lt;div id="twitRow4" style="display: none;"&gt;Row 4&lt;/div&gt;
      &lt;div id="twitRow5" style="display: none;"&gt;Row 5&lt;/div&gt;
      &lt;div id="twitRow6" style="display: none;"&gt;Row 6&lt;/div&gt;
      &lt;div id="twitRow7" style="display: none;"&gt;Row 7&lt;/div&gt;
      &lt;div id="twitRow8" style="display: none;"&gt;Row 8&lt;/div&gt;
      &lt;div id="twitRow9" style="display: none;"&gt;Row 9&lt;/div&gt;
  &lt;/div&gt;  
  &lt;script&gt;
  doTimer();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now for the most part this works, it's hiding the rows and showing the correct ones and looping around just fine. The problem I am having, is the setTimeout that is doing the hide and then show is not actually running. The show and hide are running, but straight after one another, there is no 1s pause between them.</p>
  
  <p>Anyone got any idea whats happening here?</p>
  
  <p>Syn</p>