如何在 Javascript 中将按钮点击率限制为每分钟一次

发布于 2024-08-07 03:46:48 字数 261 浏览 8 评论 0原文

我有一个基于 PHP 的 Web 应用程序，用于监视进程的状态并显示具有该状态的页面。用户可以单击页面上的按钮来更新状态。但是，我的服务器上的处理负载足够重，因此不希望过于频繁地更新状态。因此，我想要一种方法来限制某人每分钟点击“提交”按钮一次（这会刷新页面上显示的状态）。例如，如果有人在 12:00:00 单击该按钮，则在 12:01:00 之前他们应该无法再次单击该按钮。

单击按钮后，我可能想禁用该按钮并在一分钟过去后重新启用它 - 这是我的首选解决方案。

非常感谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感情废物 2024-08-14 03:46:48

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>

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

倥絔 2024-08-14 03:46:48

只是一个建议，但如果您打算通过使用客户端计时器（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>

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

素手挽清风 2024-08-14 03:46:48

要执行此纯 JavaScript，您可以简单地捕获单击事件，禁用按钮并在超时后再次启用它，下面的代码使用 jQuery 并假设您的按钮有一个 id 'button' ( 或者如果是输入：点击！)

<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

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

酒废 2024-08-14 03:46:48

使用setTimeout。

回复收藏 0 原文

笑饮青盏花 2024-08-14 03:46:48

使用 underscore.js 这很简单：

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

using underscore.js this is as easy as:

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

回复收藏 0 原文

~没有更多了~

关于作者

两个我

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

如何在 Javascript 中将按钮点击率限制为每分钟一次

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如何在 Javascript 中将按钮点击率限制为每分钟一次

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。