演示
试试在文本框中输入一些文字 (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代码: