Nach der Ausführung der Aufgabe binden?

Question

Die delay() scheint nicht das Ding zu tun. Nachdem der Benutzer auf .tab geklickt hat, sollte er deaktiviert werden, um auf eine beliebige andere .tab zu klicken, und nach Abschluss der Schritte sollten die Klicks erneut aktiviert werden.

$('.tab').on('click', function() { 
    //disable user clicks while performing the stuff below 
    $('.tab').unbind(); 
    //stuff going on here 
    //enable clicking again 
    $('.tab').delay(500).bind();  
}); 

Answer 1

Die docs sagt:

Die .delay() Methode zur Verzögerung zwischen der Warteschlange jQuery Effekte am besten ist. Weil es begrenzt ist - es bietet zum Beispiel keine Möglichkeit, die Verzögerung abzubrechen - ist .delay() kein Ersatz für die native JavaScript-Funktion setTimeout, die für bestimmte Anwendungsfälle möglicherweise besser geeignet ist.

delay soll fx Warteschlange verzögern Ausführung der Elemente in jQuerys, die Animationen und Effekte in Zusammenhang steht. Für andere Zwecke sollten Sie setTimeout verwenden. Und da Sie bereits on verwenden, sollten Sie off verwenden und bei on bleiben, anstatt es mit bind zu mischen.

$('.tab').on('click', function handler() { 
 
    //----------------------------^ for re-use 
 
    //disable user clicks while performing the stuff below 
 
    $('.tab').off(); 
 
    //stuff going on here 
 
    //enable clicking again 
 
    console.log('test'); 
 
    setTimeout(function() { 
 
    $('.tab').on('click', handler); 
 
    }, 5000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab">test</div>

Answer 2

Wenn Sie anrufen $('.tab').unbind(); Sie sind alle Handler auf die Elemente angebracht entfernt das Ereignis nicht deaktivieren.

Und bind müssen neue Event-Handler gegeben werden. http://api.jquery.com/bind/

Answer 3

$('.tab').css("pointer-events", "none"); 

und

$('.tab').css("pointer-events", "auto"); 

statt bindet