如何在Javascript中将按钮的点击速率限制为每分钟一次
[英]How to rate-limit clicks on a button to once per minute in Javascript
问题描述
I have a PHP-based web application that monitors the status of a process and displays a page with that status. 
我有一个基于PHP的Web应用程序，该应用程序监视进程的状态并显示具有该状态的页面。 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. 例如，如果某人在12:00:00单击该按钮，则他们应该直到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. 非常感谢你。
5 个解决方案
解决方案1
5 2009-10-11 08:12:38
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? 这只是一个建议，但是如果您要麻烦编写代码以使用客户端计时器（setTimeout）对提交按钮进行速率限制，为什么不将所有更新按钮全部删除，然后页面以您预定的时间间隔自动更新？
Here's some sample code in jQuery (since jQuery offers some great cross-browser AJAX support) 这是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>
解决方案2
5 2009-10-11 08:27:18
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>) 要使用这种纯JavaScript，您只需捕获click事件，禁用按钮并在超时后再次启用它，以下代码使用jQuery并假设您的按钮具有id“ button”（<button id =“ button”>单击！</ button>或作为输入：<input type ='button'id =“ button”>单击！</ 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. 您说进度非常沉重，请注意，即使人们不能再按一分钟一次按钮（如果启用了javascript），他们仍然可以禁用javascript并按需要任意按按钮，或致电直接按自己的意愿多次发送网址。
EDIT Added full HTML to script 编辑添加完整的HTML脚本
解决方案3
4 已采纳 2009-10-11 19:38:58
wtf... people is jQuery addicted. 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>
解决方案4
2 2009-10-11 08:08:52
使用setTimeout。
解决方案5
0 2012-08-10 11:17:32
使用underscore.js就像这样简单：
var func = _.debounce(function(x) {return x * x}, 60000);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.