如何限制元素在一分钟内被点击的次数？

Question

我正在做一个PM系统，我目前正在添加消息星标系统（以便用户可以星标消息）。

问题在于，如果用户一直快速地为消息加星标和取消星标（一遍又一遍地单击它），它会弄乱服务器（主机将发出 503 错误，直到进程停止）。要为消息加注星标，只需单击星标即可为其加注星标/再次单击可取消星标。

有没有办法防止它被多次点击，或者在一分钟内点击x次后弹出错误？这将防止它使服务器过载，因为当您单击星号时，它会发送 AJAX 请求并更新数据库；当你取消它的星号时，它会做同样的事情。

如果星号在一分钟左右被点击，是否有 jQuery 显示错误的方法？

这些是我的主演功能：

function addStar(id) {
    $('#starimg_' + id).removeClass("not_starred").addClass("starred");
    $('#star_' + id).attr({
        'title': 'Starred',
        'onclick': 'removeStar(' + id + ')'
    });
    $.get('tools.php?type=addstar', {id: id}, function(data) {
    if(data=='true') { // tools.php will echo 'true' if it is successful
    alertBox('The message has been starred successfully', 2500);
    }
    else { alertBox('An error has occurred. Please try again later.'); }
});
}

function removeStar(id) {
    $('#starimg_' + id).removeClass("starred").addClass("not_starred");
    $('#star_' + id).attr({
        'title': 'Not starred',
        'onclick': 'addStar(' + id + ')'
    });
    $.get('tools.php?type=removestar', {id: id}, function(data) {
    if(data=='true') { // tools.php will echo 'true' if it is successful
    alertBox('The message has been unstarred successfully', 2500);
    }
    else { alertBox('An error has occurred. Please try again later.'); }
});
}

提前致谢！

Answer 1

这里是您的 addStar 函数的示例解决方案。这将在用户最后一次点击后 2 秒发送请求，因此如果用户点击满意，那些中间点击将不会发送请求，因为计时器将被重置。

 function addStar(id, delayRequests)
{
    ...
    if(delayRequests == true){
        clearTimeout(timer);
        timer= setTimeout(function() { sendRequestToAddStar(id); },2000);
    }
    else{
        sendRequestToAddStar(id);
    }
}

function sendRequestToAddStar(id)
{
   $.get('tools.php?type=removestar', {id: id}, function(data) {...
}

Answer 2

无论如何，IMO 最好不要显示错误消息。

考虑在每次点击星星时启动/重置倒数计时器。一旦倒计时，发送星的当前状态。保留用户反馈并遵守速率限制。

他们不需要知道有速率限制，或者它不是每次都发送请求。

（描述一个简单的问题用了很多词，我想我们知道“给消息加星标”是什么意思：）