清除setTimeout

Question

我对 javascript/jquery 不太感兴趣，但我想做的只是向 mouseenter 函数添加一个超时，我不能做任何戏剧，但我也想清除超时如果用户在超时到期之前离开该元素 - 主要是为了允许光标跳过触发元素。

代码如下（mouseenter 有效，mouseleave 有效，但不清除超时）：

    $(document).ready(function() {

    var timeout;

    $('#mainMenu ul li').mouseenter(function() {
        var dropTab = 'ul.' + this.id + 'Dropdown';
        timeout = setTimeout( function(){ 
            $(dropTab).slideToggle("fast") }, 500
            );
    }); 

    $('#mainMenu ul li').mouseleave(function() {
        clearTimeout(timeout);
        var dropTab = 'ul.' + this.id + 'Dropdown';
        setTimeout( function(){ 
            $(dropTab).slideToggle("fast") }, 250
            );
    }); 
   });  

Answer 1

也许您可以尝试使用.hover()。这个例子对我有用： http://jsbin.com/egaho3/edit

Answer 2

当然，缓动会增加用户体验。在不过度编程的情况下，我会 clearTimeout( ) 像这样：(jsFiddle)

$( document ).ready( function( )
{ 
    var timeout;
    var maxHeight = 167;
    var minHeight = 20;

    $( '#mainMenu .list-item' )

    .bind( 'mouseenter', function( )
    {
        var el = $( this );

        timeout = setTimeout( function( )
        {
            el.stop( ).animate( { 'height' : maxHeight + 'px' } );
        }, 500 );               
    } )

    .bind( 'mouseleave', function( )
    {
        var el = $( this );

        if ( !timeout ) 
        {
            timeout = setTimeout( function( )
            {
                el.stop( ).animate( { 'height' : minHeight + 'px' } );
            }, 250 ); 
        }

        else
        {
            el.stop( ).animate( { 'height' : minHeight + 'px' } );
        }

        clearTimeout( timeout );
    } );

   $( '.list-link' ).bind( 'click', function( )
    {
          var text = $( this ).text( );
          var parentListItem = $( this ).parent( ).attr( 'id' );
          alert( 'List item hovered: ' + parentListItem + "\r" + 'Link clicked : ' + text );                      
    } );
} );​​

Answer 3

这可能可以更多地解释问题： JQuery，setTimeout 不起作用

Answer 4

试试这个..我不确定。

$(文档).ready(function() {

var timeout;

$('#mainMenu ul li').mouseenter(function() {
    var dropTab = 'ul.' + this.id + 'Dropdown';
    timeout = setTimeout( function(){ 
        $(dropTab).slideToggle("fast") }, 500
        );
});   

clearTimeout(timeout);


$('#mainMenu ul li').mouseleave(function() {

    var dropTab = 'ul.' + this.id + 'Dropdown';
  timeout=  setTimeout( function(){ 
        $(dropTab).slideToggle("fast") }, 250
        );
}); 

});

Answer 5

尝试 .hover()，可能会起作用：

$(document).ready(function() {
    var timeout;
    $('#mainMenu ul li').hover(function() {
        var dropTab = 'ul.' + this.id + 'Dropdown';
        timeout = setTimeout( function(){ 
            $(dropTab).slideToggle("fast") }, 500
        );
    },
    function() {
        if(timeout)clearTimeout(timeout);
        var dropTab = 'ul.' + this.id + 'Dropdown';
        setTimeout( function(){ 
            $(dropTab).slideToggle("fast") }, 250
        );
    }); 
});