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

前端未结

关注

 5  569

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

相关标签:

5条回答

日久生厌

2021-01-24 05:51

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>

0 讨论(0)

悲哀的现实

2021-01-24 05:54
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
0 讨论(0)
发布评论:

提交评论
- 加载中...

后悔当初

2021-01-24 06:09

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>

0 讨论(0)

南笙

2021-01-24 06:16

Use setTimeout.

0 讨论(0)
发布评论:

提交评论
- 加载中...
孤独总比滥情好

2021-01-24 06:17
using underscore.js this is as easy as:
```
var func = _.debounce(function(x) {return x * x}, 60000);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...