JQuery fadeIn fadeOut with setInterval working sporadically
<p>I have a bunch of images that need to rotate in and out one at a time every 2 seconds with fancy JQuery fadeIn and fadeOut.  I have all the images in the HTML to pre-load them and a setInterval timer that fades the current image out, then fades the next image in.  Problem is that sometimes when you are clicking or scrolling during the fade in/out process, the JS gets interrupted and the current image never disappears and the next one fades in giving you two images.</p>

<p>I get the feeling it has something to do with setInterval not running properly every 2 seconds, but are there any better ways to accomplish what I need?</p>

<p>Here's a snippet of code:</p>

<p>HTML</p>

<pre><code>&lt;a href="javascript:;"&gt;
  &lt;img id="img1" src="image1.gif" /&gt;
  &lt;img id="img2" src="image2.gif" style="display:none;" /&gt;
  &lt;img id="img3" src="image3.gif" style="display:none;" /&gt;
&lt;/a&gt;
</code></pre>

<p>JS</p>

<pre><code>var numImages = 3;
var currentImage = 1;
imageInterval = window.setInterval("changeImage();", 2000);

function changeImage()
{
 $("#img" + currentImage).fadeOut("slow", function() {
  if (currentImage &gt;= numImages)
  {
   currentImage = 0;
  }
  $("#img" + (currentImage + 1) ).fadeIn("slow", function() {
   currentImage++;
  });
 });
}
</code></pre>
