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

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) {...
}