jquery-timing - a jQuery plugin you should know about

Updated . Posted . Visible to the public.

jquery-timing Show archive.org snapshot is a very useful jquery plugin that helps to remove lots of nested anonymous functions. It's API provides you some methods that help you to write readable and understandable method chains. See yourself:

Example

// before
$('.some').show().children().doThat();
window.setTimeout(function(){
  $('some').children().doSomething().hide(function() {
    window.setTimeout(function() {
      otherStuffToDo();
    }, 1000);
  });
}, 500);

// after
$('.some').show().children().doThat() .wait(500) .doSomething().hide() . wait(1000) . otherStuffToDo();

jquery-timing transformed the setTimeout callback into a chainable method. Now the code is easier to read and understand.
Image you need to show another node 10 seconds after the hide animation completed. Normally you would pass an anonymous function to hide().
With jquery-timing you can chain your methods and don't need to break the flow.

Situations where the plugin is useful

jquery-timing can help you out in lots of situations (e.g. timeouts, intervals, event callbacks, ...).
Here's an excerpt of usage examples Show archive.org snapshot :

  • Patterns with animations
  • Patterns with arrays of values
  • Patterns with callbacks
  • Patterns with chain interruption
  • Patterns with closed loops
  • Patterns with inline attached events
  • Patterns with instant loops
  • Patterns with intervals
  • Patterns with open loops
  • Patterns with parallel loops
  • Patterns with promises
  • Patterns with sequential loops
  • Patterns with timeouts

Hint: You should also have a look at deferred objects (promises pattern) Show archive.org snapshot , the refactored jQuery AJAX Show archive.org snapshot component and some articles Show archive.org snapshot about jQuery deferreds Show archive.org snapshot .

Ulrich Berkmueller
Last edit
License
Source code in this card is licensed under the MIT License.
Posted by Ulrich Berkmueller to makandra dev (2012-12-06 14:25)