Prevent Javascript Function From Firing Multiple Times

jsFiddle I use a customized drop-down menu which runs on jquery events and animations. The problem occurs when I activate the drop-down via mouseenter several times, which result

Solution 1:

Basically it boils down to delaying the execution of the event handler.

var mouseoverTimer = null;    

$('.elem').mouseover(function(){

   clearTimeout(mouseoverTimer); //ignore previous trigger

   mouseoverTimer  = setTimeout(function(){ //wait to execute handler again//execute actual handler here
   }, 10);
});

If the same handler was called within the specified interval the pending execution is cancelled and queued again to execute 10ms later hoping that there's no subsequent trigger within that interval.