Prevent onMouseOver firing multiple times continuously if event queue is not empty

Question

I have a question regarding onmouseover on "a" tag. I currently have a list of "img" thumbnails which have onMouseOver attached to the "a" tag which wraps the "img". When the mouse is over the image, a "preview" of the image will load in another div via a javascript function, this javascript function has a jquery fadeto effect so the preview will fade into view.

The problem now is if a user hover over multiple thumbnails quickly, the onMouseOver event is registered multiple times, so when the user finally stop hovering over multiple thumbnails quickly, the last thumbnail will receive the event multiple times and fades in not only once. Below is my code:

    function previewimage(loadimg){
      jloadimg='<img src="../images/'+loadimg+'.png" />';

      //stimulate a fade in effect by making the image has 0.7 opacity first
      $(#largeimage).fadeTo('fast', 0.7, function() {
      });
      $(#largeimage).fadeTo('slow', 1, function() {
      });

      document.getElementById('largeimage').innerHTML=jloadimg;
    }

for the list of thumbnail images, I have:

<a onMouseOver="previewimage('imagefile1');"><img src="path/to/thumbnail/image1.png" /></a>
<a onMouseOver="previewimage('imagefile2');"><img src="path/to/thumbnail/image2.png" /></a>
<a onMouseOver="previewimage('imagefile3');"><img src="path/to/thumbnail/image3.png" /></a>

How do I cancel multiple event from running continuosly if the previous one is still in queue? Thank you.