Как ограничить количество нажатий на кнопку один раз в минуту в Javascript - PullRequest
Новая
       15

Как ограничить количество нажатий на кнопку один раз в минуту в Javascript

0 голосов
/ 11 октября 2009

У меня есть веб-приложение на основе PHP, которое отслеживает состояние процесса и отображает страницу с этим состоянием. Пользователи могут нажать кнопку на странице, чтобы обновить статус. Однако нагрузка на мой сервер достаточно велика, поэтому слишком частое обновление статуса нежелательно. Поэтому я хочу, чтобы кто-то ограничил одним щелчком в минуту кнопку «Отправить» (которая обновляет статус, отображаемый на странице). Например, если кто-то нажмет кнопку в 12:00:00, он не сможет нажать ее снова до 12: 01: 00.

После нажатия на кнопку я хотел бы, возможно, отключить кнопку и повторно включить ее по прошествии одной минуты - это мое предпочтительное решение.

Большое спасибо.

Ответы [ 5 ]

5 голосов
/ 11 октября 2009

Просто предложение, но если вы собираетесь пройти через труд, чтобы написать код для ограничения скорости кнопки отправки с помощью таймера на стороне клиента (setTimeout), почему бы просто не удалить кнопку обновления все вместе, и сделать автоматическое обновление страницы с заданным интервалом?

Вот пример кода в jQuery (поскольку jQuery предлагает отличную поддержку AJAX в разных браузерах) 

<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>
5 голосов
/ 11 октября 2009

Чтобы сделать этот чистый javascript, вы можете просто захватить событие click, отключить кнопку и включить его снова после истечения времени ожидания, приведенный ниже код использует jQuery и предполагает, что у вашей кнопки есть id 'button' ( или, если это вход: Click! ) 

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

Вы говорите, что прогресс довольно тяжелый, обратите внимание, что, хотя люди не могут нажимать кнопку более одного раза в минуту (если у них включен javascript, то есть), они все равно могут отключить JavaScript и нажимать кнопку столько, сколько хотят, или звоните по URL столько раз, сколько им хочется.

РЕДАКТИРОВАТЬ Добавлен полный HTML к скрипту

4 голосов
/ 11 октября 2009

wtf ... люди зависимы от 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>
2 голосов
/ 11 октября 2009

Использовать setTimeout.

0 голосов
/ 10 августа 2012

с использованием underscore.js это так же просто, как: 

var func = _.debounce(function(x) {return x * x}, 60000);
...