How can I limit the number of times an element is clicked within a minute?

Question

I am making a PM system, and I am currently adding the message starring system (so the user can star messages).

The problem is that if the user keeps starring and unstarring a message very fast (clicking it over and over again) it will mess up the server (the host will put a 503 error until the processes stop). To star a message it is simple as clicking the star to star it/clicking again to unstar it.

Is there a way to prevent it from being clicked a lot, or rather make an error pop up after it is clicked x number of times within a minute? That would prevent it from overloading the server because when you click the star it sends an AJAX request and updates the database; when you unstar it, it does the same thing.

Is there a jQuery way of showing an error if the star was clicked within a minute or so?

These are my functions for the starring:

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.'); }
});
}

Thanks in advance!

Answer 1

here is a sample solution for your addStar function. This will send the request 2 sec after the users last click, so if the user is click happy those intermediate clicks will not send requests since the timer will be reset.

 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

In any case, IMO it's better to not show an error message.

Consider starting/resetting a countdown timer every time the star is clicked. Once it counts down, send the current state of the star. User feedback is preserved and rate-limiting is honored.

They don't need to know there's a rate limit, or that it's not sending a request every time.

(That was a lot of words to describe a simple problem, and I think we know what "starring a message" means w/o a picture :)