JQuery deaktivieren Link für 5 Sekunden

Question

Ich habe diesen Code:

$('#page-refresh').click(function() { 
     $.ajax({ 
      url: "/page1.php", 
      cache: false, 
      dataType: "html", 
      success: function(data) { 
       $('#pagelist').html(data); 
      } 
     }); 
     return false; 
    }); 

In diesem Code ist es möglich, dass auf der Ajax-Erfolg Funktion das es # page-Refresh-Klick für 5 Sekunden aktivieren Sie dann wieder deaktiviert? Grundsätzlich, wenn eine Person auf die Schaltfläche klickt und diese Aktion passiert, möchte ich nicht, dass sie klickt und diese Aktion für weitere 5 Sekunden erneut ausführt. Ich schaute auf delay(), um den Klick für diesen zu lösen, dann binde ich ihn erneut, aber sobald er nicht verbunden war, konnte ich nie mehr auf den Button klicken.

Answer 1

Wenn "# page-Refresh" ist wirklich eine Schaltfläche (a button oder input type="button" Element), können Sie seine disabled Eigenschaft verwenden und stellen Sie dann einen Timeout, um sie wiederherzustellen:

$('#page-refresh').click(function() { 
    var refreshButton = this; 
    $.ajax({ 
     url: "/page1.php", 
     cache: false, 
     dataType: "html", 
     success: function(data) { 
      $('#pagelist').html(data); 
      refreshButton.disabled = true; 
      setTimeout(function() { 
       refreshButton.disabled = false; 
      }, 5000); 
     } 
    }); 
    return false; 
}); 

Wenn es nicht wirklich eine Schaltfläche, können Sie die disabled Eigenschaft simulieren. Ich werde hier mit einer Klasse tun, so dass Sie den deaktivierten Zustand für den Benutzer über CSS zeigen:

$('#page-refresh').click(function() { 
    var $refreshButton = $(this); 
    if (!$refreshButton.hasClass('disabled')) { 
     $.ajax({ 
      url: "/page1.php", 
      cache: false, 
      dataType: "html", 
      success: function(data) { 
       $('#pagelist').html(data); 
       $refreshButton.addClass('disabled'); 
       setTimeout(function() { 
        $refreshButton.removeClass('disabled'); 
       }, 5000); 
      } 
     }); 
     return false; 
    }); 

Beachten Sie, dass im ersten Fall, ich einen Verweis auf das DOM-Element zu halten (var refreshButton = this;), aber im zweiten Fall behalte ich einen Verweis auf einen jQuery-Wrapper (var $refreshButton = $(this);). Das liegt nur daran, dass jQuery das Testen/Hinzufügen/Entfernen von Klassennamen erleichtert. In beiden Fällen wird diese Referenz freigegeben, sobald die Closures in Ihrem Event-Handler freigegeben wurden (im obigen Beispiel sind das fünf Sekunden, nachdem der Ajax-Aufruf abgeschlossen wurde).

---

Sie ausdrücklich gesagt, Sie es nach der Ajax-Aufruf abgeschlossen ist, aber als Marcus weist darauf hin, unten, werden Sie wahrscheinlich um sie deaktivieren deaktivieren möchten wollte, als der Anruf Ajax starten. Einfach mit der Deaktivierung Bit ein wenig, und fügen Sie einen error Handler für den Fall, dass success nicht aufgerufen (error Handler sind in der Regel eine gute Idee, in jedem Fall):

Echt Taste:

$('#page-refresh').click(function() { 
    var refreshButton = this; 
    refreshButton.disabled = true;    // <== Moved 
    $.ajax({ 
     url: "/page1.php", 
     cache: false, 
     dataType: "html", 
     success: function(data) { 
      $('#pagelist').html(data); 
      setTimeout(function() { 
       refreshButton.disabled = false; 
      }, 5000); 
     }, 
     error: function() {     // <== Added 
      refreshButton.disabled = false; 
     } 
    }); 
    return false; 
}); 

über 'behindert' Klasse Simulierte:

$('#page-refresh').click(function() { 
    var $refreshButton = $(this); 
    if (!$refreshButton.hasClass('disabled')) { 
     $refreshButton.addClass('disabled'); // <== Moved 
     $.ajax({ 
      url: "/page1.php", 
      cache: false, 
      dataType: "html", 
      success: function(data) { 
       $('#pagelist').html(data); 
       setTimeout(function() { 
        $refreshButton.removeClass('disabled'); 
       }, 5000); 
      }, 
      error: function() {    // <== Added 
       $refreshButton.removeClass('disabled'); 
      } 
     }); 
     return false; 
    }); 

Answer 2

dies nur tun:

$('#page-refresh').click(function() { 
    var btn = $(this); 

    // disable button 
    btn.attr('disabled', 'disabled'); 

    $.ajax({ 
     url: "/page1.php", 
     cache: false, 
     dataType: "html", 
     success: function(data) { 
      $('#pagelist').html(data); 

      // set timer to re-enable button after 5 seconds (or 5000 milliseconds) 
      window.setTimeout(function(){ 
       btn.removeAttr('disabled'); 
      }, 5000); 
     } 
    }); 
    return false; 
}); 

Answer 3

Eine generische Lösung, die eine Taste für 5 Sekunden zu deaktivieren:

$(document).ready(function() 
{ 
    $(".btn").click(function() 
    {    
     var lMilisNow= (new Date()).getTime(); 
     this.disabled=true; 
     this.setAttribute("data-one-click", lMilisNow); 
     setTimeout("oneClickTimeout()",5100); 
    }); 
} 

function oneClickTimeout() 
{ 
    $(".btn[data-one-click]").each(function() 
    { 
     var lMilisNow= (new Date()).getTime(); 
     var lMilisAtt= this.getAttribute("data-one-click"); 
     lMilisAtt= lMilisAtt==null? 0: lMilisAtt; 
     if (lMilisNow-lMilisAtt >= 5000) 
     { 
      this.disabled=false; 
      this.removeAttribute("data-one-click"); 
     } 
    }); 
}