Stop next mouseover event from firing until inner function has finished

I am implementing a simple image swapping feature with a fade in jquery.

$('#thumbs img').mouseover(function(){  
// code to swap images here
});

If I move the mouse really quickly the m开发者_高级运维ouseover keeps firing and the code to swap the images cant keep up. How do I stop the mouseover event on $('#thumbs img') from firing until the inner code has executed ?

$('#thumbs img').mouseover(function(){
  if(!moving){
    moving = true;
    // code to swap images here
    if(complete) // some test to see if image swap has finished
      moving = false;
  }
});

You can remove the evant handler while processing:

$('#thumbs img').mouseover(dostuff);

function dostuff()
{
    $(this).unbind('mouseover', dostuff);
    // code to swap images here
    $(this).mouseover(dostuff);
}

(Something like that - I cannot test it out atm ). What you are doing is removing the event handler while it is processing, and rebinding once it is complete.