清除 setTimeout答案

【问题标题】：clearing setTimeout清除 setTimeout
【发布时间】：2011-03-25 06:10:39
【问题描述】：

我对 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
            );
    }); 
   });

【问题讨论】：

标签： javascript jquery timeout

【解决方案1】：

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

【讨论】：

.hover() 引起了一些奇怪的行为 - 留在 mouseenter 和 leave 中，但你的示例的其余部分成功了。谢谢。

【解决方案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 );                      
    } );
} );

【讨论】：

【解决方案3】：

这或许能解释更多问题：JQuery, setTimeout not working

【讨论】：

【解决方案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
        );
});

});

【讨论】：

【解决方案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
        );
    }); 
});

【讨论】：

哈哈哈这太傻了谢谢@themerlinproject，我会编辑它。