演示
试试在文本框中输入一些文字 (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(); }; });