Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

jQuery Queue Plugin

Make your Javascript application more flexible.


Javascript is an event-driven programming language. Therefore with heavy frontend applications your code is easy to have nested callbacks. And this make your code less flexible.

With jQuery Queue plugin you can add functions in a queue outside the function scope; execute the queued functions later. It makes your code easily to be more modularize. It is a must have if you write heavy frontend websites.


  • Please see demo/index.html
  • Live demo please take a look at this


  • There is a syntax highlight version, please see this post
  • For chinese version please go here


  • jQuery 1.3.0+

Browser Compatibility


  • First, make sure you are using valid DOCTYPE
  • Include nessesary JS files
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="path-to-file/jquery.queue.js"></script>



push function to a queue

$.queue( 'add', 'queueName', function( arg1, arg2, arg3 ){
  // do something here

remove function from a queue

var someFunction = function( arg1, arg2, arg3 ){
  // some code

$.queue( 'remove', 'queueName', 'someFunction' );

call queue functions

$.queue( 'call', 'queueName', [ arg1, arg2, arg3 ]);
// or
$.queue( 'call', 'queueName', arg );

clear queue

$.queue( 'clear', 'queueName' );

Example code:

Store ajax call data , here we use $.secret plugin

// store data outside a ajax call
$.queue( 'in', 'afterLoadPhotos', function( total, photos ){
  // store( cache ) flickr photo data for later use
  $.secret( 'in', 'totalPhotos', total ).
    secret( 'in', 'photos', photos );

Append to DOM

// append photos to the dom using data 'outside' the ajax call
$.queue( 'add', 'afterLoadPhotos', function( total, photos ){
  var fragment = '';
  $.each( photos, function( key, photo ){
    fragment = fragment + '<li><a href="' + photo.imagePath + '">' +
    '<img scr="' + photo.thumb_path + '"/><span>' + photo.title +
  $( '#gallery' ).append( fragment );

execute queue functions for 'afterLoadPhotos'

  type : 'get',
  url : '/flickr/photos',
  dataType : 'json',
  success : function( rsp ){
    $.queue( 'call', 'afterLoadPhotos', [, ]);

With this plugin we don't have to defined what we are going to do after the ajax call or inside the ajax call. Not only with ajax call, we can also use it to connect different class and module more flexible through out the whole application.


$.queue supports 1 layer namespace. With large application we might need to split our code into modules.

Example code:

// push a function to getPhotos queue under FLICKR module
$.queue( 'add', 'FLICKR.afterGetPhotos', function( secret, extraParams ){
  // do stuffs here

// another function for searching images on google
$.queue( 'add', 'GOOGLE.searchImage', function( args ){
  // do other stuffs here


The expandable plugin is licensed under the MIT License (LICENSE.txt).

Copyright (c) 2011 Ben Lin


A jQuery plugin that makes your Javascript application more flexible




No packages published
You can’t perform that action at this time.