With jQuery Message Queuing you can throttle a large number of commands or requests, giving each request some breathing room. This can be useful for keeping large numbers of costly DOM manipulations from locking up the browser, or for firing off high volumes of serial tracking pixel requests.

This example is a purely visual representation of how this type of queue might execute.

Let's get to it!

In this example, whenever the queue callback is executed, a green box is added. When the queue becomes empty due to its natural completion (and not being explicitly cleared), a grey "done" box is added.

You may hover over any numbered item to add it to the queue, and you may also pause, start or clear the queue, as well as change the queue's batch size.

Last item: N/A, Size: 0
item/items processed queue completed

The code

$(function(){
  
  // Create a new queue.
  window.queue = $.jqmq({
    
    // Queue items will be processed every 250 milliseconds.
    delay: 250,
    
    // Process queue items one-at-a-time.
    batch: 1,
    
    // For each queue item, execute this function.
    callback: function( item ) {
      $('#output')
        .append( '<span>' + item + '<\/span>' )
        .find('.done')
          .remove();
      
      // Update the "Size" display.
      set_size();
    },
    
    // When the queue completes naturally, execute this function.
    complete: function(){
      $('#output').append( '<span class="done">done<\/span>' );
    }
  });
  
  // On mouseover, add an item to the queue.
  $('#items a').mouseover(function(){
    var item = $(this).text();
    queue.add( item );
    
    // Update the "Last" display.
    set_last( item );
    
    // Update the "Size" display.
    set_size();
  });
  
  // Bind queue actions to nav buttons.
  
  nav( 'Pause', 'Queue paused.', function(){
    queue.pause();
  });
  
  nav( 'Start', 'Queue started.', function(){
    queue.start();
  });
  
  nav( 'Clear', 'Queue cleared.', function(){
    queue.clear();
  });
  
  nav( 'Batch = 1', 'Queue batch size set to 1.', function(){
    queue.update({ batch: 1 });
  });
  
  nav( 'Batch = 4', 'Queue batch size set to 4.', function(){
    queue.update({ batch: 4 });
  });
  
  nav( 'Delay = 100', 'Queue delay set to 100.', function(){
    queue.update({ delay: 100 });
  });
  
  nav( 'Delay = 250', 'Queue delay set to 250.', function(){
    queue.update({ delay: 250 });
  });
  
});