Question

What is a good way to block until a previous ajax event is completed?

I followed How can you make a vote-up-down button like in Stackoverflow? but if I click the button fast enough, it’ll send multiple (and maybe inconsistent) events to the server. How do I make it so it’ll forcethe user to wait before another click can be registered?

Edit: I also do not want it to block globally – just for that button/item. Do I’ll need to maintain a hash?

Answer 1

Well since I wrote that I guess I might as well answer this too 😉

The ‘common’ way of doing this is by having an indicator variable that the request is in progress and updating it accordingly before/after everything happens. For my code in that question, you would edit it as follows:

Outside of the click function, add this:

var voting = false; // not initially voting

Inside the click function, at the very top, add this:

if(voting) return false; // if voting, return
voting = true; // if not, set voting to true

Inside of both post callbacks, add this:

voting = false; // done voting, set back to false

If you want to maintain an indicator on a per-question/answer/item basis, you could do this:

First, replace this code:

var id = $(this).parents('div.answer').attr('id').split('_')[1];

With this:

var parent = $(this).parents('div.answer'); // get the parent div
if(parent.data('voting')) return false; // if voting, return
parent.data('voting', true); // if not, update the marker
var id = parent.attr('id').split('_')[1]; // get the id

Then inside both post callbacks, add this:

parent.data('voting', false); // done voting, set back to false

In this case we’d be using jQuery’s data to store the voting status of a particular question/answer/item inside the containing DIV and updating it accordingly whenever something happens.

Hope this helps.