Aggregating / Collecting AJAX requests

I have situation where a user can manipulate a large set of data (presented in a table) by using a bunch of filters represented as checkboxes.

The page is AJAXed up so the user doesn't have to wait for a full page refresh every time they click a filter. The way it's currently开发者_如何学Python implemented is by having an event handler watch all the checkboxes and request filtered data from the server when a click event is triggered.

This works fine. However, there is a usability & performance issue with doing it this way. For example, if a user clicks 6 checkboxes, 6 AJAX requests are triggered and they all come back at various intervals causing the page to be updated 6 times. This will most probably annoy the user and seems rather inefficient.

I want to put some kind of timeout on the event handler to do something like this: "Wait for 1 second and if there are no more filters clicked trigger the AJAX request". However, at the moment I've only been able to delay all 6 requests by 1 second. I'm not sure how to aggregate / collect the filter info into 1 AJAX request.

Any suggestions would be greatly appreciated!

---

Have the "click" events first check to see if there's a timer pending. If so, the click should cancel it, and start a new timer.

(function() {
  var timeout = null;
  $('#yourForm').find('input:checkbox').click(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      doTheAjaxStuff();
    }, 500);
  });
})();

Something like that will mean that until a user has paused their wild frenzy of box checking for half a second, there'll be no AJAX requests made. Once the user pauses, the request should transmit the current state of all checkboxes so that appropriate updates can be made. Note that this means you may need to change the way the server actions work, because you won't have separate AJAX calls for each input.

---

jQuery has some built-in functionality for this if that's what you're after. If you just store the results to update the page and use $.ajaxStop(). This only fires when there are no pending requests, so after the last request completes. If you fire 5 in a row then they all come back over-top of each other, this gets called once which seems to be what you're after.

Description of .ajaxStop():

Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time.

You can use it like this:

$(document).ajaxStop(function() {
  $("#myPageElement").html($("#resultStore").html());
  $("#resultStore").empty(); //Cleanup
});

In your ajax calls:

$.ajax({
  //Existing stuff...
  success: function(data) {
    $("#resultStore").html(data);
  });
});

So all your requests complete as normal, we just update the content once at the end, not sure how to get much simpler :) This also has the benefit of if any of the requests fail, the last successful one is used to update the page.

---

You could do this by setting a flag in your first click event, so that only one timer gets started:

if (!ajaxRequestsPending) {
  ajaxRequestsPending = true;
  window.setTimeout(...);
}

The code that actually does the ajax request would reset the flag.

---

First - Try to use jQuery Grid plugin - some solumns will be sortable on client side. Second - Maybe you can make "Ok" button for sending request parameters!?