jQuery consente di triggersre la diapositiva due volte al doppio clic

Come posso evitare che la levetta si sposti due volte con un doppio clic?

Ho un pulsante che triggers un interruttore a scorrimento. Si triggers in modo corretto se si fa clic sul pulsante una sola volta ma se si fa clic due volte sul pulsante, le diapositive della diapositiva si aprono e si riapre immediatamente.

Come posso mantenere la levetta della diapositiva per rimanere fuori anche con doppio clic?

Codice qui: https://codepen.io/anon/pen/Ljgqjo

JS:

$('button').on('click', function(){ $('#one').fadeOut('slow', function(){ $('#two').toggle('slide', {direction: 'right'}, 800, function(){ }); }); }); 
 .container{ width:300px; height:200px; overflow:hidden; } #one{ background:blue; width:300px; height:200px; } #two{ background:purple; width:300px; display:none; height:200px; } 
    

Qui vai con una soluzione http://jsfiddle.net/nya99njz/2/

 var sliding = false; $('button').on('click dblclick', function(){ if(!sliding){ sliding = true; $('#one').fadeOut('slow', function(){ $('#two').toggle('slide', {direction: 'right'}, 800, function(){ sliding = false; }); }); } }); 
 .container{ width:300px; height:200px; overflow:hidden; } #one{ background:blue; width:300px; height:200px; } #two{ background:purple; width:300px; display:none; height:200px; } 
    

Imposta un flag per tracciare se la tua animazione è in esecuzione. Controlla se è impostato prima di consentire all’azione clic di avere alcun effetto. Distriggerslo una volta completata l’animazione:

 var animating = false; $('button').on('click', function(){ if(!animating){ animating = true; $('#one').fadeOut('slow', function(){ $('#two').toggle('slide', {direction: 'right'}, 800, function(){ animating = false; }); }); } }); 

Questo ha l’ulteriore vantaggio di proteggere contro i clic tripli (e i clic quadrupli, ecc …)

Puoi cambiare questa linea

$('button').on('click', function(){

A

$('button').on('click dblclick', function(){

Quindi farà la stessa cosa per clic e doppio clic.