Here are some simple delay and polling loop examples, utilizing doTimeout. For more usage examples, also see the doTimeout plugin page.

Like setTimeout, but better!

$('#set_timeout1 a.start').click(function(){
  // In one second, do something!
  $.doTimeout( 1000, function(){
    $('#set_timeout1 span').html( 'done!' );
  });
});

Set value: ???

Start

This works exactly like setTimeout, except that you can pass additional callback arguments as parameters to doTimeout, which will actually be passed into the callback in all browsers! (setTimeout doesn't quite get this right in all browsers).

Like setTimeout, but on a jQuery object

$('#set_timeout2 a.start').click(function(){
  // Execute .css( 'color', 'blue' ), now then in
  // one second, execute .css( 'color', 'blue' ).
  $('#set_timeout2 span')
    .css( 'color', 'red' )
    .doTimeout( 1000, function(){
      this.css( 'color', 'blue' )
    });
});

Set value: Some text, more text

Start

Much like setTimeout or the example above, except that in the callback, `this` refers to the jQuery object. Chainable, too!

An even easier syntax!

$('#set_timeout2a a.start').click(function(){
  // Execute .css( 'color', 'blue' ), now then in
  // one second, execute .css( 'color', 'blue' ).
  $('#set_timeout2a span')
    .css( 'color', 'red' )
    .doTimeout( 1000, 'css', 'color', 'blue' );
});

Set value: Some text, more text

Start

Much like setTimeout or the example above, except with a much more concise "string method" syntax. Still chainable!

Basic polling loop (somewhat like setInterval.. but different)

var counter1 = 0;

$('#polling_loop1 a.start').click(function(){
  // Start a polling loop with a counter.
  $.doTimeout( 250, function(){
    $('#polling_loop1 span').html( ++counter1 );
    return true; // Poll.
  });
});

Polling loop counter: ???

Start

If you need to-the-millisecond loop timing accuracy, use setInterval, but beware that this may have unwanted side effects. For example, if the callback execution time takes longer than the delay (due to slow code or late execution), the next callback might execute immediately afterwards, which is almost never what you want in a polling loop!

So.. for practical polling loops, use doTimeout. All you need to do is return true, and doTimeout does the rest!

Basic polling loop, with a built-in limit

var counter2 = 0;

$('#polling_loop2 a.start').click(function(){
  // Start a polling loop with a counter.
  $.doTimeout( 250, function(){
    $('#polling_loop2 span').html( ++counter2 );
    if ( counter2 < 50 ) { return true; } // Poll.
  });
});

Polling loop counter: ???

Start

This polling loop example is like the simple example above, except that the loop is automatically canceled after 50 iterations. This condition should, of course, be something actually useful.. but for this example, a simple counter does the trick.

Cancelable polling loop

$('#polling_loop3 a.start').click(function(){
  // Start a polling loop with an id of 'loop' and a counter.
  var i = 0;
  $.doTimeout( 'loop', 500, function(){
    $('#polling_loop3 span').html( ++i );
    return true;
  });
});

$('#polling_loop3 a.force').click(function(){
  // Prematurely force execution of next polling loop iteration.
  $.doTimeout( 'loop', true );
});

$('#polling_loop3 a.cancel').click(function(){
  // Cancel the polling loop with id of 'loop'.
  $.doTimeout( 'loop' );
});

Polling loop counter: ???

(Re)start, Force, Cancel

Unlike all the preceding doTimeout examples, this example uses an id ("loop") which allows it to be restarted, overridden, or canceled.

Notice that once started, restarting the loop will first cancel the already-running loop, keeping things sane. Forcing the loop will cause the callback to be invoked immediately (continuing the polling loop), and canceling the loop will stop it immediately.

Cancelable polling loop, but on a jQuery object

var elem = $('#polling_loop4');

elem.find('a.start').click(function(){
  // Start a polling loop with an id of 'loop' and a counter.
  var i = 0;
  elem.doTimeout( 'loop', 500, function(){
    this.find('span').html( ++i );
    return true;
  });
});

elem.find('a.force').click(function(){
  // Prematurely force execution of next polling loop iteration.
  elem.doTimeout( 'loop', true );
});

elem.find('a.cancel').click(function(){
  // Cancel the polling loop with id of 'loop'.
  elem.doTimeout( 'loop' );
});

Polling loop counter: ???

(Re)start, Force, Cancel

Much like the example above, except that in the callback, `this` refers to the jQuery object.

Also, notice that when an id is used in doTimeout on a jQuery object, that id is specific to that object and will not override a $.doTimeout id of the same name or a different jQuery object's doTimeout id.