jQuery Ajax Queue

July 7 2010

The need to perform synchronous AJAX calls sometimes arises, for example if your passing tokens back and forth for security reasons. jQuery makes such calls dead easy, all you have to do is set the ‘async’ option to false when setting up the AJAX handler.

$('.click-me').bind('click', function(e){
  e.preventDefault();
  $.ajax({
    url: 'someurl',
    async: false,
    success: function(data) {
      console.log('blocking');
    }
  });
});

The problem of this approach is that the browser locks up if the server takes a long time to respond. Because this is quite likely(heavy load during peak times etc) this would be damaging to the user experience. The ideal solution would be queue up AJAX requests without the browser locking up at all.

Because Google can’t answer everything, I managed to come up with the following non blocking solution using queue, a function that’s part of jQuery core.

$('.click-me').bind('click', function(e){
  e.preventDefault();
  $(document).queue(function() {
    $.ajax({
      url: 'someurl',
      success: function(data) {
        console.log('non blocking');
        $(document).dequeue();
      }
    });
  });
});