title: setInterval, clearInterval, setTimeout conflict messing up slideshow
body: <p>I've got a slideshow that autoplays on document.ready by triggering my left arrow click on setInterval. I'm trying to stop the autoplay when the nav arrows are clicked, while still allowing the arrows to navigate the slides.</p>
  
  <p>This accomplishes that.</p>
  
  <pre><code>var intervalId = window.setInterval(switchLeft, 4000);
  
  $("#leftarrow, #rightarrow").click(function() {
      window.clearInterval(intervalId);
  });
  </code></pre>
  
  <p>But I want the autoplay to kick back in if the arrows haven't been clicked in 8 seconds. I have tried turning the setInterval back in by adding this setTimeout into the click function, but it counts all the clicks of user navigation during the pause and starts throwing my slides around like crazy. (I've got two layers of images moving on every click.)</p>
  
  <pre><code>setTimeout(function() {
    intervalId = window.setInterval(switchLeft, 4000)
  }, 8000);
  </code></pre>
  
  <p>I've tried wrapping stuff in a setTimeout function but I just end up getting different weirdness.</p>
  
  <p>Thanks for any help,
  Charlie Magee</p>