For basic usage examples, also see the doTimeout plugin page or the doTimeout documentation.

Hover intent on individual items (500ms delay)

$('#item-over a')
  .mouseenter(function(){
    $(this).doTimeout( 'hover', 500, function(){
      $(this).addClass( 'hover' );
    });
  })
  .mouseleave(function(){
    $(this).doTimeout( 'hover', 500, function(){
      $(this).removeClass( 'hover' );
    });
  });

Hover intent on a group of items (500ms delay)

$('#items-over a')
  .mouseenter(function(){
    var that = $(this);
    $.doTimeout( 'hover', 500, function(){
      $('#items-over-text').html( that.html() );
    });
  })
  .mouseleave(function(){
    $.doTimeout( 'hover' );
  });

Go ahead, hover!

Typing into a textfield (250ms delay)

var default_text = $('p.textfield').text();
$('form input').keyup(function(){
  $(this).doTimeout( 'typing', 250, function(){
    $('#text-input').text( $(this).val() || default_text );
  });
});

Go ahead, type!

Window resize (IE and Safari fire this event continually)

$(window).resize(function(){
  $.doTimeout( 'resize', 250, function(){
    // do something computationally expensive
  });
});

General element-specific doTimeout (vs setTimeout) example

function start1() {
  $('#timeout-sample')
    .doTimeout( 'sample', 3000, function(){
      debug.log( '#timeout-sample', 'color', 'green' );
      $(this).css( 'color', 'green' );
    })
    .css( 'color', 'red' );
  
  debug.log( '#timeout-sample', 'color', 'red' );
};

function start2() {
  $('#timeout-sample')
    .doTimeout( 'sample', 2000, function(){
      debug.log( '#timeout-sample', 'color', 'blue' );
      $(this).css( 'color', 'blue' );
    })
    .css( 'color', 'magenta' );
  
  debug.log( '#timeout-sample', 'color', 'magenta' );
};

function start3() {
  $('#timeout-sample')
    .doTimeout( 'sample', 1000, function(){
      var random_color = '#'+('00'+(Math.random()*0x1000<<0).toString(16)).substr(-3);
      debug.log( '#timeout-sample', 'color', random_color );
      $(this).css( 'color', random_color );
      // returning true creates a polling loop, false cancels
      return true;
    });
};

function force_cancel() {
  var result = $('#timeout-sample').doTimeout( 'sample' );
  
  // true if canceled, undefined if already executed
  debug.log( 'cancel result:', result );
};

function force_poll() {
  var result = $('#timeout-sample').doTimeout( 'sample', true );
  
  // true if forced, undefined if already executed
  debug.log( 'force poll result:', result );
};

function force_nopoll() {
  var result = $('#timeout-sample').doTimeout( 'sample', false );
  
  // true if forced, undefined if already executed
  debug.log( 'force no poll result:', result );
};

start1() - initialize doTimeout (red -> green)
start2() - initialize doTimeout (pink -> blue)
start3() - initialize doTimeout (random colors)
force_cancel() - cancel
force_poll() - force, polling loop may continue
force_nopoll() - force, polling loop is canceled

Sample text!

start1(), start2() or start3() will override any existing 'sample' doTimeout for that element if its callback hasn't yet executed. For non-element-specific doTimeout, use $.doTimeout() instead of $(elem).doTimeout(). Random color code originally posted on Paul Irish's site.