Comment autoriser qu'une seule méthode JavaScript "clic" soit cliquée à la fois pendant l'exécution de l'animation?

Question

Lorsqu'un élément est cliqué, un div glisse de l'écran vers le centre. Lorsqu'un autre élément est cliqué, d'autres div dans les coulisses du centre de l'écran et un autre div diapositives.

Le problème se produit lorsqu'un autre élément est cliqué avant la div initiale a le temps de glisser au centre de l'écran.

$('#about').click(function(){ 
    /* makes any visible div slide out and slides in the 'about' div */ }); 

$('#contact').click(function(){ 
    /* makes any visible div slide out and slides in the 'contact' div */ }); 

En d'autres termes, lorsque vous cliquez sur about et tout de suite cliquez contact alors les deux diapositive de manière incohérente.

J'ai déjà essayé "attrRemove", "unbind", "off" ... et bien qu'ils travaillent pour désactiver les clics, je ne peux pas les activer à nouveau.

Answer 1

Une façon d'aborder cela consiste à utiliser une variable qui indique si une action est actuellement en cours. Si vous voulez faire la queue de l'événement (de sorte que vous ne pas tout à fait ignorer le clic (comme l'exemple ci-dessous fait), le code pourrait être modifié pour l'ajouter à une file d'attente d'une sorte.

var slideInProgress = false; 

$('#about').click(function(){ 
    if (!slideInProgress) { 
     slideInProgress = true; 
     $("#slider").slideToggle(5000, function(){ 
     slideInProgress = false; 
    }); 
    } 
}); 

A très simple, rapidement mis en place Fiddle pour cet exemple est ici: https://jsfiddle.net/t8tcr0rp/

Answer 2

ce code peut aider

function aboutFunc() { 
    $('#about').off('click'); 
    $('#contact').off('click'); 

    //do your stuff 

    $('#about').on('click', aboutFunc); 
    $('#contact').on('click', contactFunc); 
} 

function contactFunc() { 
    $('#about').off('click'); 
    $('#contact').off('click'); 

    //do your stuff 

    $('#about').on('click', aboutFunc); 
    $('#contact').on('click', contactFunc); 
} 


$('#about').on('click', aboutFunc); 
$('#contact').on('click', contactFunc);