Como o limite de taxa clique em um botão para uma vez por minuto em javascript

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

  •  20-09-2019
  •  | 
  •  

Pergunta

Eu tenho um aplicativo da Web baseado em PHP que monitora o status de um processo e exibe uma página com esse status. Os usuários podem clicar em um botão na página para atualizar o status. No entanto, a carga de processamento no meu servidor é pesada o suficiente para que a atualização do status com muita frequência seja indesejável. Então, eu quero uma maneira de limitar alguém a um clique por minuto no botão Enviar (que atualiza o status exibido na página). Por exemplo, se alguém clicar no botão às 12:00:00, não poderá clicar novamente até as 12:01:00.

Depois de clicar no botão, gostaria de desativar o botão e reativá -lo após um minuto passar - essa é a minha solução preferida.

Muito obrigado.

Foi útil?

Solução

WTF ... as pessoas são viciadas em 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>

Outras dicas

Apenas uma sugestão, mas se você for o problema de escrever o código para limitar o botão Enviar usando um timer do lado do cliente (setTimeout), por que não remover o botão de atualização todos juntos e fazer o página Atualização automática no seu intervalo predefinido?

Aqui está algum código de amostra no jQuery (já que o jQuery oferece um ótimo suporte de Ajax cruzado)

<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 fazer este javascript puro, você pode simplesmente capturar o evento de u003Cbutton id="button">cliqueu003C/button> , desativar o botão e ativá -lo novamente após um tempo limite, o código abaixo está usando o jQuery e assumindo :u003Cinput type='button' id="button"> Clique!u003C/input> )

<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>

Você diz que o progresso é bastante pesado, observe que, embora as pessoas não possam pressionar o botão mais do que uma vez por minuto (se tiverem JavaScript habilitado), elas ainda podem desativar o JavaScript e pressionar o botão o quanto quiserem, ou ligue para o URL diretamente tantas vezes quanto eles.

EDITAR Adicionado html completo ao script

Use setTimeout.

Usando subscore.js, isso é tão fácil quanto:

var func = _.debounce(function(x) {return x * x}, 60000);
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top