Verhindern mehrere Klicks auf einen Link mit JS oder jquery

Question

Ich habe einen Link, der beim Klicken öffnet ein modales Popup. Wenn die Netzwerkverbindung langsam ist, dauert es einige Zeit, um das Popup zu öffnen. Und wenn der Benutzer super schnell ist, könnte er den Link mehrmals anklicken und es erscheinen mehrere Popups auf dem Bildschirm. Ich möchte verhindern, dass der Benutzer mehrfach auf den Link klickt.

Ich habe den Link beim ersten Klick deaktiviert. aber das Problem ist, wenn das Popup geschlossen ist, es die Verbindung nicht wieder aktiviert.

Wie verhindere ich diese Mehrfachklicks und stelle sicher, dass der Link aktiviert ist, wenn das Popup nicht angezeigt wird.

$('#link').click(function() { 
    $(this).attr("disabled", "disabled"); 
    $("#popup").show(); 
}); 

Answer 1

Sie erhalten eine Callback-Funktion verwenden müssen, und man kann es ein einer von zwei Stellen platzieren: Entweder als Argument in Show() übergeben oder in welchem ​​Skript das modale Schließen auslöst.

Zum Hinzufügen es ändern zu zeigen:

$('#link').click(function() { 
    $(this).attr("disabled", "disabled"); 
    $("#popup").show(); 
}); 

zu

$('#link').click(function() { 
    var $temp = $(this); 
    $(this).prop("disabled", true); 
    $("#popup").show(function(){ 
     $temp.prop("disabled", false); 
    ); 
}); 

(Siehe Remove disabled attribute using JQuery? warum Sie prop statt attr

Answer 2

Taste auf Pop-up schließen Aktion aktivieren verwenden sollten. So:

$("#popup").hide("slow", function() { 
    $("#link").removeAttr('disabled'); 
    }); 

Answer 3

Sie können eine Flag-Variable verwenden, um zu verfolgen, ob die Verknüpfung bereits angeklickt wurde oder nicht, und Click-Ereignis-Callback nur dann ausführen lassen, wenn zuvor nicht geklickt wurde.

var isClicked; 
$('#link').click(function() { 
    if(isClicked){ 
    return false; 
    } 
    isClicked = true; 
    $("#popup").show(); 
}); 

Jetzt können Sie isClicked = false aktualisieren, wo Sie $("#popup").hide();

Answer 4

tun könnten Sie haben soeben einen setTimeout verwenden. Führen Sie die Funktion aus, um die Schaltfläche nach dem Klicken zu deaktivieren, und rufen Sie eine Zeitüberschreitung auf, um sie nach einiger Zeit wieder zu aktivieren.