How to rate-limit clicks on a button to once per minute in Javascript

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

  •  20-09-2019
  •  | 
  •  

Question

I have a PHP-based web application that monitors the status of a process and displays a page with that status. Users can click a button on the page to update the status. However, the processing load on my server is heavy enough that updating the status too frequently is undesirable. So I want a way to limit someone to one click per minute on the Submit button (which refreshes the status displayed on the page). For example, if someone clicks the button at 12:00:00, they should not be able to click it again until 12:01:00.

After a click on the button, I would like to perhaps disable the button and re-enable it after one minute has passed - that's my preferred solution.

Thank you very much.

Was it helpful?

Solution

wtf... people is jQuery addicted.

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

OTHER TIPS

Just a suggestion, but if you're going to go through the trouble to write the code to rate-limit the submit button by using a client-side timer (setTimeout), why not just remove the update button all together, and make the page auto-update at your pre-defined interval?

Here's some sample code in jQuery (since jQuery offers some great cross-browser AJAX support)

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

To do this pure javascript, you can simply capture the click event, disable the button and enable it again after a timeout, the below code is using jQuery and assuming your button has an id 'button' (<button id="button">Click!</button> or if it is an input: <input type='button' id="button">Click!</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>

You say the progress is quite heavy, note that even though people can not press the button more then once a minute (if they have javascript enabled that is) they can still disable javascript and press the button as much as they want, or call the url directly as many times as they feel like.

EDIT Added full HTML to script

Use setTimeout.

using underscore.js this is as easy as:

var func = _.debounce(function(x) {return x * x}, 60000);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top