Read more

jquery-timing - a jQuery plugin you should know about

Ulrich Berkmueller
December 06, 2012Software engineer

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();
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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 .

Posted by Ulrich Berkmueller to makandra dev (2012-12-06 15:25)