.wait(timeout ,callback)

Description: Wait for a given amount of time before continuing method invocation.
timeout – number
the number of milliseconds to wait for.
A value of 0 means the shortest possible timeout that the browser provides via window.setTimeout().
callback – function(count…), optional
a method that is called once after the timeout.
All current iteration counts/events (from inner-most to outer-most loop) are passed as arguments.

Usage pattern

$('.some').doSome().wait(timeout).doLater();
 
$('.some').doSome().wait(first-timeout).jQueryStuff()
  .wait(second-timeout).doLater().jQueryStuff();
 
$.wait(first-timeout, function(){ … })
  .wait(second-timeout, function(){ … })
  .wait(third-timeout, function(){ … });

Other versions of wait(…)

See also usage of unwait(…)

Examples with waiting for timeout

Example #2: repeated blinking with iterated timeouts

By using .toggleClass() the CSS class switches from being added and removed after every timeout.

In this example a repeated timeout of 700 milliseconds is used. 

$('.blink').repeat().toggleClass('blink').wait(700);
⇒

This is a blinking text.

See also another example for the same task using an interval loop instead.

Example #7: clock display with one short blink per second

The whole method chain .text(Date).addClass('blink').wait(100).removeClass('blink') is repeated once per second. 

$('.example').repeat(1000,true).text(Date)
  .addClass('blink').wait(100).removeClass('blink');​
⇒

Here is a clock: --.

In this code the object Date is used as a callback function to get a simple example for changing text.

Example #10: fading submenus with user friendly timeouts

Menu navigation is frustrating when the submenu closes immediately on mouseleave, because sometimes the mouse pointer moves few pixels unintended. That's why we want to build in timeouts on mouseenter and mouseleave to show/hide the corresponding submenu.

With jquery-timing this is just two lines: 

$('#menu li')
  .mouseenter($).unwait().wait(200).children('ul').fadeIn()
  ._.mouseleave($).unwait().wait(300).children('ul').fadeOut();​
⇒
​

Example #14: wait a timeout after each click before blinking

With the concatenation of two .wait()s we achieve a single short blink.

Instead of attaching an event handler explicitly we start an infinite event loop for the "click" event. Repeat loops are always sequential, i.e. the next iteration can start only if the previous one ended. You can see this behavior when double- or triple-clicking the button. 

$('.example button').repeat('click').prev()
   .wait(500).addClass('blink')
   .wait(300).removeClass('blink');
⇒

That text blinks half a second after hitting .

Example #18: falling little boxes

This example first creates 25 little boxes with an inline definition: 
$('#boxparent').repeat().append('<div>').until(25)
  .children().hide();

These 25 boxes shall be animated as falling down with each button click.

A helper function is necessary to animate them in reverse order: 
$.fn.reverse = function() {
  return this.$(this.get().reverse());
}

Try clicking on that button multiple times during animation. With .stop(true,true) and .unwait() all animations are reset at the beginning. 

$('button').on('click').fadeTo('slow',0.3)
  .$('#boxparent div').stop(true,true).unwait()
  .css({top:-300}).show().reverse()
  .each($).animate({top:0},500).wait(100).all()
  .wait(500).fadeOut('slow')
  .$('button').wait(200).fadeTo('slow',1);
⇒
​