清除setTimeout

Question

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

代码如下（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

当然，Easing会增加用户体验。如果没有过度程序化，我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 not working

Answer 4

试试这个..我不确定。

$（document）.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
        );
    }); 
});