Jquery disabilitare collegamento per 5 secondi

Question

ho questo codice:

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

In questo codice è possibile che sulla funzione successo ajax disabilita la # page-refresh clicca per 5 secondi, quindi riabilitarla? Fondamentalmente se una persona fa clic sul pulsante e questa azione si verifica, non voglio che facciano clic ed esegui nuovamente questa azione per altri 5 secondi. Ho guardato delay() per separare il clic per questo, quindi legarlo di nuovo, ma una volta smesso non mi ha più permesso di fare clic sul pulsante.

Answer 1

Se "# page-refresh" è in realtà un pulsante (un button o input type="button" elemento), è possibile utilizzare la sua proprietà disabled e quindi impostare un timeout per ripristinarlo:

$('#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; 
}); 

Se non è davvero un pulsante, è possibile simulare la proprietà disabled. Lo farò con una classe qui in modo da poter mostrare lo stato disattivato per l'utente tramite CSS:

$('#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; 
    }); 

Si noti che nel primo caso, sto mantenendo un riferimento all'elemento DOM (var refreshButton = this;), ma nel secondo caso sto mantenendo un riferimento ad un wrapper jQuery attorno ad esso (var $refreshButton = $(this);). Questo perché jQuery rende facile testare/aggiungere/rimuovere nomi di classi. In entrambi i casi, tale riferimento viene rilasciato dopo il rilascio delle chiusure nel gestore di eventi (in alto, ovvero cinque secondi dopo il completamento della chiamata ajax).

---

Lei ha detto espressamente che volevi disabilitarlo dopo la chiamata ajax è completo, ma come sottolinea Marco di seguito, probabilmente desidera disattivarlo quando partire la chiamata AJAX. Basta muovere il bit di disattivazione di un po ', e aggiungere un error gestore per il caso in cui success non ottenere chiamato (error gestori sono di solito una buona idea, in ogni caso):

pulsante reale:

$('#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; 
}); 

simulato via 'disabilitato' classe:

$('#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

solo fare questo:

$('#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

Una soluzione generica per disabilitare un tasto per 5 secondi:

$(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"); 
     } 
    }); 
}