jQuery的doTimeout像js原生的setTimeout,但是兼容性更好。

jQuery doTimeout takes the work out of delayed code execution, including interval and timeout management, polling loops and debouncing. In addition, it’s fully jQuery chainable!

Generally, setTimeout is used in JavaScript to delay the execution of some code, which is fairly easy to do and doesn’t require much, if any additional code. Where it starts to get a little more complicated is when you want to debounce or poll, or need any kind of timeout management—at which point keeping track of and clearing multiple timeout ids becomes critical and potentially messy. doTimeout maintains its own internal cache of ids and callbacks, so you don’t have to. Just think of setTimeout, but with additional management options, jQuery chainable, and with a simpler and more flexible API.

Examples

Basic setTimeout usage (see the basic examples):

// like setTimeout.
$.doTimeout( 1000, function(){
  // do something in 1 second
});

// Like setTimeout, but easily cancelable (or forceable).
$.doTimeout( 'someid', 2000, function(){
  // do something in 2 seconds
});

// Override the preceding doTimeout with a new one.
$.doTimeout( 'someid', 1000, function( state ){
  alert( state ); // alert true in 1 second
}, true);

// Outright cancel the preceding doTimeout.
$.doTimeout( 'someid' );

// Or force the callback execution immediately (synchronously).
$.doTimeout( 'someid', false );

Create a polling loop (see the polling loop examples):

// Poll every 100ms until some_condition is true
$.doTimeout( 100, function(){
  if ( some_condition ) {
    // do something finally
    return false;
  }
  return true;
});

// Poll every 100ms until some_condition is true,
// cancelable (or forceable).
$.doTimeout( 'someid', 100, function(){
  if ( some_condition ) {
    // do something finally
    return false;
  }
  return true;
});

// Outright cancel the preceding doTimeout polling loop.
$.doTimeout( 'someid' );

// Or force the callback execution immediately
// (synchronously), canceling the polling loop.
$.doTimeout( 'someid', false );

// Or force the callback execution immediately
// (synchronously), NOT canceling the polling loop.
$.doTimeout( 'someid', true );

Debounce some event handlers (see the debouncing examples):

// Typing into a textfield (250ms delay)
$('input:text').keyup(function(){
  $(this).doTimeout( 'typing', 250, function(){
    // do something with text, like an ajax lookup
  });
});

// Window resize (IE and Safari fire this event continually)
$(window).resize(function(){
  $.doTimeout( 'resize', 250, function(){
    // do something computationally expensive
  });
});

And this is a jQuery plugin after all, so let’s chain with it (see the delay and polling loop examples):

var elems = $('a');

// Create a cancelable (or forceable) doTimeout.
elems
  .doTimeout( 'someid', 2000, 'removeClass', 'remove-me-in-two-seconds' )
  .addClass( 'remove-me-in-two-seconds' );

// Outright cancel the preceding doTimeout.
elems.doTimeout( 'someid' );

// Or force the callback execution immediately (synchronously).
elems.doTimeout( 'someid', true );

// "Poll" every 100ms, iterating over each element until
// none are left.
var idx = 0;
elems
  .doTimeout( 100, function(){
    var elem = this.eq( idx++ );
    if ( elem.length ) {
      elem.removeClass( 'remove-me-one-elem-at-a-time' );
      return true;
    }
  })
  .addClass( 'remove-me-one-elem-at-a-time' );

Just take a look at the documentation for methods, arguments and usage, as well as the examples, which include hover intentdelayed input on form fieldspolling, and a few event handler debouncingdemos (among others).

If you have any non-bug-related feedback or suggestions, please let me know below in the comments, and if you have any bug reports, please report them in the issues tracker, thanks!

来源;http://benalman.com/projects/jquery-dotimeout-plugin/

http://www.css88.com/demo/dotimeout/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值