title: How to pause javascript after executing a script for some time and then resume?
body: <p>i'm trying to make js gallery with image change, when user rollovers the thumbnail.
  I have made it successfully and used css3 fade-in animation for image change, it works ok, but if I rollover my cursor on thumb1, dont wait for the animation to finish and rollover on another thumbnail the image changes without animation. It is hard to explain because my English is not the best, so i'll give you my code.</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8" standalone="no"?&gt;
  &lt;?xml-stylesheet type="text/css" href="#css21" media="screen"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;
  &lt;meta http-equiv="Window-target" content="_top" /&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
  &lt;title&gt;Untitled-1&lt;/title&gt;
  &lt;style id="css21" type="text/css" media="screen"&gt;
  html, body {
  color : #405060;
  font : normal normal normal 95%/1.5 Verdana, Tahoma, Arial, san-serif;
  height : auto;
  margin : 0;
  padding : 0;
  text-align : center;
  width : auto; }
  body {
  background-color : #000000; }
  div {
  border : none;
  margin : 0;
  padding : 0; }
  div#gscreen {
  float : none;
  height : 250px;
  width : 100%;
  clear : both;
  
  -webkit-transition: background 1500ms ease-in 0ms; /* property duration timing-function delay */
  -moz-transition: background 1500ms ease-in 0ms;
  -o-transition: background 1500ms ease-in 0ms;
  transition: background 1500ms ease-in 0ms;  }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  
  
  var imageGallery = ( function() {
  
  var xelem = ( function( xTag ) {
  var ua = ((( ie = document.all.tags( xTag )) &amp;&amp; !!!( ff = document.getElementsByTagName( xTag ))) ? 1 : 0 );
  var xObj = null || { 0 : ff, 1 : ie }[ ua ];
  return xObj;
  } );
  return function imageGallery( tagX ) {
  var xItem = xelem("div");
  var xScreen = xItem["gscreen"];
  var xImg = xelem( tagX );
  var iLen = xImg.length;
  for ( i = 0; !!( xImg[ i ] ); i++ ) {
  xImg[ i ].onmouseover = function() {
  var xIndex = Number( this.id.match(/\d+/)[ 0 ] );
  xScreen.style.background = " url(" + this.src + ") no-repeat top center";
  
  }
  }
  }
  } )();
  onload = function() {
  imageGallery("img")
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="gscreen"&gt;&lt;/div&gt;
  
  &lt;img id="i0" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw" height="100" width="200" style="background-image='url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw)'" alt="test images" /&gt;
  &lt;img id="i1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSlGvpoCsCgGcX74IWG5YNmjULh1Q428frxtmabTCNM_aVKFGH9" style="background-image='url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw)'" height="100" width="200" alt="test images" /&gt;
  &lt;img id="i2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3DluQXJW-4stVrHlArRc6gZnuxqmKKyheZsDWt-kGjvfjj43M" height="100" width="200" style="background-image='url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw)'" alt="test images" /&gt;
  &lt;img id="i3" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQDC56QxLfOgZyrX96BfPveif-dKlrDIwsB45uGlL3XicDL10EqlA" height="100" width="200" style="background-image='url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw)'" alt="test images" /&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So, I think if I pause javascript for 1500ms after executing "onmouseover" user will not be able to execute the function again when rollovering another thumbnail, how can I do that? Or maybe there are more options to fix the image change effect?</p>
  
  <p>Thank you for your answers.</p>