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!

http://stackoverflow.com/questions/5031501/how-to-rate-limit-ajax-requests — 0x6A75616E, Nov 22 '11 at 04:02
you could also use this: http://stackoverflow.com/questions/7804312/remy-sharps-function-throttler — 0x6A75616E, Nov 22 '11 at 04:03

score 1 · Answer 1 · answered Nov 22 '11 at 04:08

1

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 :)

answered Nov 22 '11 at 04:08

Dave Newton

158,873
26
254
302

This is a very good idea. Thanks. And yes that was a lot of words, and the picture was unnecessary, which is why I removed it :) – Nathan Nov 22 '11 at 04:11

score 1 · Accepted Answer · answered Nov 23 '11 at 01:37

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

answered Nov 23 '11 at 01:37

zero7

1,298
8
14

Wow, thank you. :) So would I do this same thing for the `removeStar()` function too, or would I only need it for the `addStar()` function? – Nathan Nov 23 '11 at 01:43
sure you can.. or you can also have one sendRequest and pass parameter to decide add or remove stars so it's up to you. – zero7 Nov 23 '11 at 01:48
Okay, great. I will try this right now. This is just perfect. And I just noticed it is stupid to say "The message has been starred" because when you click the star it shows that you starred it. – Nathan Nov 23 '11 at 03:30
Also, what would I do when I call the functions? Do I do `addStar(1234, true)`? – Nathan Nov 23 '11 at 03:31
So how would I use it? Like, what would I put for the `delayRequests`? – Nathan Dec 01 '11 at 19:10
that is just a optional bool value whether you want to have the delay when sending the request or not. – zero7 Dec 02 '11 at 01:08

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

2 Answers2