.mouseover trouble: repeating the function

Question

well, i have this menu, and i use the jquery .mouseover function and some ul/li class to do a hover effect. it goes nice, until i move the mouse fast in the menu. It does the function over and over again.

this is my jquery.

<script type="text/javascript">
$(document).ready(function(){ // Script del Navegador
$("ul.subnavegador").not('.selected').hide();
$("a.desplegable").mouseenter(function(e){    
var desplegable = $(this).parent().find("ul.subnavegador");
  $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('normal');
  desplegable.slideToggle('normal');
  e.preventDefault();
})
}); 
</script>

And now the menu

<ul class="navegador">
<li><a href="default.htm">Inicio</a></li>
<li><a href="default.htm">Inicio</a></li>
<li><a href="presentacion.htm">Presentacion</a></li>
            <li><a href="erpintro.htm" class="desplegable">ERP,CRM</a>
                 <ul class="subnavegador">
<li><a href="ERP.htm">· ERP</a></li>
                     <li><a href="CRM.htm">· CRM</a></li>
                 </ul>  
            </li> 
            <li><a href="hostintro.htm" class="desplegable">Hosteleria</a>
                 <ul class="subnavegador">
                     <li><a href="hostrest.htm">· ERP Restaurantes</a></li>
                     <li><a href="hostele.htm">· ERP Telecomandas</a></li>
                     <li><a href="hosthot.htm">· ERP Hotel</a></li>
                     <li><a href="hostbar.htm">· Alfa Bar TPV</a></li>
                 </ul>
            </li>    
            <li><a href="comintro.htm" class="desplegable">Comercio</a>
                 <ul class="subnavegador">
                     <li><a href="comezapa.htm">· Zapaterias</a></li>
                     <li><a href="comeropa.htm">· Tiendas de ropa</a></li>
                     <li><a href="comedepo.htm">· Deporte</a></li>
                     <li><a href="comejoy.htm">· Joyerias</a></li>
                     <li><a href="comeperfu.htm">· Perfumerias</a></li>
                     <li><a href="comerega.htm">· Tiendas de regalo</a></li>
                     <li><a href="comepelu.htm">· Peluquerias</a></li>
                     <li><a href="cometpv.htm">· TPV Comercio</a></li>
                     <li><a href="cometpvtactil.htm">· TPV tactil comercio</a></li>
                 </ul>
            </li>
            <li><a href="hidrointro.htm" class="desplegable">Hidrocarburos</a>
                 <ul class="subnavegador">
                     <li><a href="hidroeess.htm">· Estaciones de Servicio</a></li>
                     <li><a href="hidroauto.htm">· Terminal de Autoservicio</a></li>
                     <li><a href="hidrogaso.htm">· Gasocentros</a></li>
                     <li><a href="hidroenruta.htm">· Venta en ruta de Gasoleos</a></li>
                 </ul>
            </li>
            <li><a href="bodintro.htm" class="desplegable">Bodegas y Almazaras</a>
                 <ul class="subnavegador">
                     <li><a href="Bodegas.htm">· Bodegas</a></li>
                     <li><a href="Almazaras.htm">· Almazaras</a></li>
                 </ul>
                 </li>
            <li><a href="servicios.htm">Servicios Informatcios</a></li>  
            <li><a href="default.htm">Telefonía</a></li>
            <li><a href="default.htm">Diseño Web</a></li>
            <li><a href="default.htm">Formación</a></li>
            <li><a href="Eventos.htm">Eventos</a></li>
            <li><a href="ubicacion.htm">Ubicación</a></li>
            <li><a href="promotions/equipamiento.htm">Promociones</a></li>
        </ul>

Thanks in advance for any answer and help

Answer 1

You could try the .stop() function before slideToggle().

desplegable.stop(true, false).slideToggle('normal');

API: http://api.jquery.com/stop/

When things become more complicate (callbacks, ...) it could be nice to wrap everything inside an eventHandler.

// ignore fast events, good for capturing double click
// @doc (event.timeStamp): http://api.jquery.com/event.timeStamp/
// @bug (ev.currentTime): https://bugzilla.mozilla.org/show_bug.cgi?id=238041
ignoredEvent: (function () {
    var last = {},
        diff, defEvent;

    return function (callback, time, id) {
        defEvent = this.defaults.events.ignore; // object: { id: "event", ms: 300 }
        id = id || defEvent.id;
        diff = last[id] ? time - last[id] : time;

        if (diff > defEvent.ms) {
            last[id] = time;
            callback();
        }
    };
})();

Just make sure the current time can be achieved x-browser. (new Date).getTime() can help instead of event.currentTime or event.timeStamp.

My implementation example goes something like this:

container.navigation.click(function (ev) {
    ev.preventDefault();
    helpers.ignoredEvent(function () {
        // do your thing here
    }, (new Date).getTime());
});

Answer 2

A simple approach would be to maintain a boolean that is toggled when mouseenter is triggered and when the eventhandler is finished firing.

var entered = false;
$(document).ready(function(){ // Script del Navegador
    $("ul.subnavegador").not('.selected').hide();
    $("a.desplegable").mouseenter(function(e){    
        if(!entered){
            entered = true;
            var desplegable = $(this).parent().find("ul.subnavegador");
            $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('normal');
            desplegable.slideToggle('normal', function(){
                entered = false;
            });
            e.preventDefault();
        }
     });
});