Jquery desactivar enlace durante 5 segundos

Question

tengo este código:

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

En este código es posible que la función del éxito ajax deshabilita el # page-refresh clic durante 5 segundos y luego volver a habilitarla? Básicamente, si una persona hace clic en el botón y se produce esta acción, no quiero que hagan clic y ejecuten esta acción nuevamente durante otros 5 segundos. Miré a delay() para desvincular el clic para esto y volver a enlazarlo, pero una vez que se desembarazó, nunca más me permitió hacer clic en el botón.

Answer 1

Si "# page-refresh" es en realidad un botón (un elemento button o input type="button"), puede utilizar su propiedad disabled a continuación, establecer un tiempo de espera para restaurarlo:

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

Si no es realmente un botón, puede simular la propiedad disabled. Lo haré con una clase aquí para que pueda mostrar el estado desactivado por el usuario a través de 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; 
    }); 

Tenga en cuenta que en el primer caso, me quedo con una referencia al elemento DOM (var refreshButton = this;), pero en el segundo caso estoy manteniendo una referencia a un contenedor jQuery alrededor de él (var $refreshButton = $(this);). Eso es solo porque jQuery hace que sea más fácil probar/agregar/eliminar nombres de clase. En ambos casos, esa referencia se libera una vez que se liberan los cierres en su controlador de eventos (en lo anterior, eso es cinco segundos después de que se complete la llamada ajax).

---

Usted dijo específicamente que quería para desactivarlo después la llamada AJAX es completa, pero como señala Marcus continuación, es probable que quieren desactivarlo cuando a partir de la llamada AJAX. Basta con mover el bit de desactivación de un poco, y agregar un controlador de error para el caso en success no se consiga llamar (error manipuladores suelen ser una buena idea en cualquier caso):

botón real:

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

simuladas a través de 'discapacitados' clase:

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

a hacer esto:

$('#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 solución genérica para deshabilitar un botón durante 5 segundos:

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