Evite que Javascript se ejecute dos veces

Question

Tengo un script que estoy desarrollando que crea un efecto de tipo botón deslizante. Cinco div's están situados uno al lado del otro con un enlace cada uno. Cuando se hace clic en uno de esos DIVS, el contenido asociado se expande y el resto de las Div se cierran.

El problema es que si un usuario hace clic dos veces en la Div mientras carga o hace clic en otra Div en sucesión rápida, comienzan a aparecer grietas.

Me pregunto si solo sería posible permitir que la consulta se ejecute una vez y esperar hasta que se complete en lugar de ponerla en la cola.

Aquí está mi código actual, si es basura siente libre de hacer comentarios sobre cómo podría mejorarlo ... No soy el mejor en Javascript/jQuery: P

function mnuClick(x){ 
    //Reset all elements 
    if($('#'+x).width()!=369){ 
     $('.menu .menu_Graphic').fadeOut(300); 
     $('.menu_left .menu_Graphic').fadeOut(300); 
     $('.menu_right .menu_Graphic').fadeOut(300); 
     $('.menu').animate({width: "76px"},500); 
     $('.menu_left').animate({width: "76px"},500); 
     $('.menu_right').animate({width: "76px"},500); 
    } 
     var ElementId = '#' + x; 

     $(ElementId).animate({ 
      width: 369 + "px" 
     },500, function(){ 
      $(ElementId + ' .menu_Graphic').fadeIn(300); 
     }); 
} 

Gracias de antemano, Chris.

Answer 1

Necesita una bandera "isRunning". Compruébalo antes de comenzar. Configúralo cuando comiences la secuencia, desactívala cuando termine.

Answer 2

(function() { 
var mutex = false; 

    function mnuClick(x){ 
     if (!mutex) { 
      mutex = !mutex; 

      /* all code here ... */ 

      mutex = !mutex; /* this statement should go into animation callback */ 
     } 

    } 

})(); 

MANTENER un estado a través de una variable por lo que no puede hacer clic más de una vez hasta que el código ha ejecutado totalmente

Answer 3

puede crear una Maskin invisible y maskout (como el fondo de caja de luz, etc.) o desactivar clics hasta que el animación termina.

Answer 4

puede desenchufar el controlador de eventos onClick (mnuClick) cuando se inicia el evento, para desactivar efectivamente la invocación de mnuClick dos veces, pero asegúrese de restaurarlo cuando finalice el evento.

Answer 5

Respuesta rápida: use .addClass y .removeClass y compruebe la existencia de la clase en el momento de la ejecución. Prueba si está configurado y regresa, o agrégalo, ejecuta el código y luego quítalo.