jQuery doTimeout插件: 比setTimeout实用的实例页面

演示

回到相关文章 >>

试试在文本框中输入一些文字 (250ms 延迟)

Go ahead, type!

JS代码:
var default_text = $('#text-type').text();

$('#whatever').keyup(function(){
  $(this).doTimeout( 'text-type', 250, function(){
    $('#text-type').text( this.val() || default_text );
  });
});


Window resize (一些浏览器不断触发此事件)

JS代码:
var resize = 0,
  dt_resize = 0;

$(window).resize(function(){
  resize++;

  $('#text-resize-1').html( 'window.onresize 事件触发: ' + resize + ' 次
window尺寸: ' + $(window).width() + 'x' + $(window).height() ); $.doTimeout( 'resize', 250, function(){ dt_resize++; $('#text-resize-2').html( 'doTimeout, 250ms 延迟, 触发: ' + dt_resize + ' 次
window尺寸: ' + $(window).width() + 'x' + $(window).height() ); }); }); $(window).resize();

Window scroll (一些浏览器不断触发此事件)

JS代码:
var scroll = 0,
  dt_scroll = 0;

$(window).scroll(function(){
  scroll++;

  $('#text-scroll-1').html( 'window.onscroll 事件触发: ' + scroll + ' 次
window scrollLeft: ' + $(window).scrollLeft() + ', scrollTop: ' + $(window).scrollTop() ); $.doTimeout( 'scroll', 250, function(){ dt_scroll++; $('#text-scroll-2').html( 'doTimeout, 250ms 延迟, 事件触发: ' + dt_scroll + ' 次
window scrollLeft: ' + $(window).scrollLeft() + ', scrollTop: ' + $(window).scrollTop() ); }); }); $(window).scroll();

mouseover mouseout (250ms延迟)

JS代码:
$('ul.main-nav').each(function(){
  var nav = $(this);

  nav
    .mouseover(function(e){
      nav.doTimeout( 'main-nav', 250, over, e.target );
    }).mouseout(function(){
      nav.doTimeout( 'main-nav', 250, out );
    });

  function over( elem ) {
    var parent = $(elem).closest( 'li.main-nav' );

    out( parent );
    parent.children( 'a' ).addClass( 'hover' );
    parent.children( 'ul:hidden' ).slideDown( 'fast' );
  };

  function out( elem ) {
    var parents = elem
      ? $(elem).closest( 'li.main-nav' ).siblings()
      : nav.children();

    if ( nav.is( '.main-nav-horizontal' ) ) {
      parents = parents.not( '.active' );
    }

    parents.children( 'a' ).removeClass( 'hover' );
    parents.children( 'ul' ).hide();
  };
});

代码

JS代码: