Cómo rate-limit hace clic en un botón a una vez por minuto en Javascript

StackOverflow https://stackoverflow.com/questions/1550150

  •  20-09-2019
  •  | 
  •  

Pregunta

Tengo una aplicación web basada en PHP que controla el estado de un proceso y muestra una página con ese estatus. Los usuarios pueden hacer clic en un botón en la página para actualizar el estado. Sin embargo, la carga de procesamiento en mi servidor es bastante pesado que actualizar el estado con demasiada frecuencia no es deseable. Así que quiero una manera de limitar a alguien a un clic por minuto en el botón Enviar (que actualiza el estado que se muestra en la página). Por ejemplo, si alguien hace clic en el botón a las 12:00:00, no deben ser capaces de hacer clic de nuevo hasta 12:01:00.

Después de un clic en el botón, me gustaría tal vez desactivar el botón y volver a habilitarlo después de un minuto ha pasado -. Eso es mi solución preferida

Muchas gracias.

¿Fue útil?

Solución

wtf ... la gente es adicto jQuery. 

<input id="btn" type="button" value="click me" onclick="doSomething();"/>

<script>
function doSomething() {
  document.getElementById("btn").disabled=true;
  setTimeout('document.getElementById("btn").disabled=false;',60000);
  // do your heavy stuff here
}
</script>

Otros consejos

Sólo una sugerencia, pero si vas a pasar por la molestia de escribir el código para evaluar límite el botón de envío mediante el uso de un contador de tiempo del lado del cliente (setTimeout), ¿por qué no quitar el botón de actualización todos juntos, y hacer que la página de actualización automática en el intervalo predefinido?

A continuación, algunos ejemplos de código de jQuery (desde jQuery ofrece un gran soporte AJAX cross-browser) 

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <scrypt type="text/javascript">
    $(function(){
        // On page load...
        updateStatus();
    })

    function updateStatus(){
        $('#status').load('/url/to/status/display.php');
        setTimeout(updateStatus, 60000) // 60,000 miliseconds = 1 minute
    }
    </script>
</head>
<body>

    <div id="status">
        <!-- whatever is in /url/to/status/display.php will be loaded here -->
    </div>

</body>
</html>

Para ello javascript puro, sólo tiene que capturar el evento click, deshabilitar el botón y activarlo de nuevo después de un tiempo de espera, el código de abajo está utilizando jQuery y suponiendo que su botón tiene un 'botón' id ( Haga clic en o si se trata de una entrada: Haga clic en ) 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript'>
$('#button').click( function(){
    $(this).attr('disabled', 'disabled');
    setTimeout(enableButton, 1000);
    return true; //make sure default click event happens
});

var enableButton = function(){
    $('#button').removeAttr('disabled');
}
</script>

Usted dice que el progreso es bastante pesado, tenga en cuenta que a pesar de que la gente no puede presionar el botón más de una vez por minuto (si se han activado javascript que es) que todavía puede desactivar JavaScript y pulse el botón tanto como ellos quieran, o llame a la dirección URL directamente tantas veces como les da la gana.

editar HTML Añadido a la escritura

Uso setTimeout.

usando underscore.js esto es tan fácil como: 

var func = _.debounce(function(x) {return x * x}, 60000);
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top