Question

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 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!

Answer 1

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.