Archived entries for

Room to Work

I was just thinking about how nice it would be to have a Textmate command that could help you isolate the block of code you’re working on.

Here’s theĀ  idea, when you’re working in a big, messy file you could:

  1. highlight a block of code
  2. press a key combination
  3. Textmate grabs that selected block
  4. opens a new file and sets it to the current language
  5. pastes in the block of code
  6. make all of your edits
  7. press the same key combo
  8. Textmate cuts the edited code
  9. closes the temp document
  10. replaces the original block of code with the updated version

That sounds like it would be pretty handy. When I get some time I’ll try to create such a thing. Plus, I need to rework my css property arranger. Some friends (and I) have found glitches.

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


Copyright © Ryan Fitzer 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Wordpress and uses a modified version of Modern Clix, a theme by Rodrigo Galindez.