очистка 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

Облегчение наверняка добавит UX. Не будучи чрезмерно программным, я бы 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

Попробуйте .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
        );
    }); 
});  

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

Это может объяснить проблему более подробно: JQuery, setTimeout не работает