Ryan Fitzer

Some Links I Want to Check Out

In need of a blog dusting, here are some links I’d like to check out.

From AddyOsmani.com

• Essential JavaScript And jQuery Design Patterns – A Free New Book
  

  Hey guys. Today I’m happy to announce the release of a free book I’ve written called ‘Essential JavaScript & jQuery Design Patterns For Beginners’. Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal.

• JavaScript 101 – A Free 10 Hour Audio Course
  

  Hey guys. Today I’m happy to announce the release of a free 10 hour downloadable JavaScript audio course for beginners called JavaScript 101. This is a course you can listen to at your own pace and covers many core JavaScript fundamentals ranging from the basics to syntax, objects, ajax and it also includes an hour of training on jQuery.

From Rebecca Murphey

• jQuery Fundamentals
  

  The purpose of this book is to provide an overview of the jQuery JavaScript library; when you’re done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.

From Andy Clarke

• Working on MobiCart

  Andy shares his files and technique on using Dropbox as a client-friendly versioning system. The code contains his use of HTML5 and CSS3. Seeing this in an actual client project from a veteran like Clarke is a great opportunity to learn real-world use-cases for the new and upcoming specs/modules.

Using jQuery’s queue(), dequeue() and delay() Methods

These methods were very confusing to me so I decided to do some demystification and see what the hell was going on. jQuery’s documentation sets them up as methods related to the effects api. By default this is true, but I found this little misleading.

queue() / dequeue(), in short, allows you to create a queue of functions to be executed on the matched element(s) and then execute them in order.

delay() allows you to create a delay between functions in the queue.

None of the functions are run until the dequeue() method is run. This could be a click event, for instance.

Take for instance the following code:

$(document).ready(function() {

	// cache the body element
	var body = $('body');

	/*
	  Create a "bodyQueue" queue for the body element and add a function into it.
	  After this funnction runs it will delay the "bodyQueue" queue by 5 seconds.
          None of the functions are run until an event triggers the dequeue() method.
          This event is defined at the end using a click on the body.
	*/
	body.queue('bodyQueue', function(){ 
	    console.log('1st function. Next one is delayed by 5 seconds');
	    $(this).dequeue('bodyQueue');
	}).delay(5000, 'bodyQueue');

	// Add another
	body.queue('bodyQueue', function(){ 
	    console.log('2nd function (delayed 5 seconds)');
	    $(this).dequeue('bodyQueue');
	});

	// Add another
	body.queue('bodyQueue', function(){ 
	    console.log('3rd function');
	    $(this).dequeue('bodyQueue');			
	});

	// Add another
	body.queue('bodyQueue', function(){ 
	    console.log('4th function');
	    $(this).dequeue('bodyQueue');
	});

	/*
	  Add another and delay the "bodyQueue" queue by 5 seconds.
	*/
	body.queue('bodyQueue', function(){ 
	    console.log('5th function. Next one is delayed by 5 seconds');
	    $(this).dequeue('bodyQueue');
	}).delay(5000, 'bodyQueue');

	// Add the last one
	body.queue('bodyQueue', function(){ 
	    console.log('6th function (delayed 5 seconds)');
	});

	// Show the queued functions when the page loads
	var queue = body.queue('bodyQueue');                               
	console.log('There are ' + queue.length + ' functions left in the "bodyQueue" queue:');
	console.log(body.queue('bodyQueue'));

	// Add an event to fire the "bodyQueue" queue
	body.click(function(){

	    // Run everything in the "bodyQueue" queue
	    body.dequeue('bodyQueue');

	});

});

What I’ve defined here is a queue with the name bodyQueue, attached it to the body element and added a series of functions. When the body element registers a click event, the callback runs body.dequeue('bodyQueue'), firing the queued functions in bodyQueue.

View the demo. Make sure you run it in Firefox with the Firebug console open to view the feedback.

Resources:

jQuery for Designers | API: queue & dequeue

jQuery in Action 2nd edition: Queuing functions for execution