¿Delay jquery hover event?

Question

Me gustaría retrasar un evento de desplazamiento en jquery. Estoy leyendo un archivo cuando el usuario pasa el mouse sobre un enlace o etiqueta. No deseo que este evento ocurra inmediatamente en caso de que el usuario solo mueva el mouse por la pantalla. ¿Hay alguna forma de retrasar el lanzamiento del evento?

Gracias.

código Ejemplo:

$(function() { 
    $('#container a').hover(function() { 
     $('<div id="fileinfo" />').load('ReadTextFileX.aspx', 
      {filename:'file.txt'}, 
      function() { 
       $(this).appendTo('#info'); 
      } 
     ); 
    }, 
     function() { $('#info').remove(); } 
    }); 
}); 

UPDATE:(1/14/09) Después de añadir el HoverIntent Plugin el código anterior se cambió a la siguiente para implementarlo. Muy simple de implementar.

$(function() { 
    hiConfig = { 
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) 
     interval: 200, // number = milliseconds for onMouseOver polling interval 
     timeout: 200, // number = milliseconds delay before onMouseOut 
     over: function() { 
      $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'}, 
       function() { 
        $(this).appendTo('#info'); 
       } 
      ); 
     }, // function = onMouseOver callback (REQUIRED) 
     out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED) 
    } 
    $('#container a').hoverIntent(hiConfig) 
} 

Answer 1

utilizar el plugin para jQuery hoverIntent: http://cherne.net/brian/resources/jquery.hoverIntent.html

Es absolutamente perfecto para lo que usted describe y yo he utilizado en casi todos los proyectos que requiere la activación encima del ratón de menús, etc ...

Hay un problema con este enfoque, algunas interfaces carecen de un estado 'hover', por ejemplo. navegadores móviles como safari en el iphone. Es posible que esté ocultando una parte importante de la interfaz o de la navegación sin posibilidad de abrirlo en dicho dispositivo. Podría solucionar esto con un CSS específico del dispositivo.

Answer 2

Puede usar una llamada setTimeout() con un clearTimeout() en el evento mouseout.

Answer 3

Debe verificar que el temporizador esté activo. Si no existe (es decir, este es el primer elemento emergente), créelo. Si existe (es decir, no es el primer elemento emergente), mátalo y reinícialo. Establezca la carga útil del temporizador a su código.

$(function() { 
    var timer; 

    $('#container a').hover(function() { 
     if(timer) { 
      clearTimeout(timer); 
      timer = null 
     } 
     timer = setTimeout(function() { 
      $('<div id="fileinfo" />').load('ReadTextFileX.aspx', 
       {filename:'file.txt'}, 
       function() { 
        $(this).appendTo('#info'); 
       } 
      ); 
     }, 500) 
    }, 
    // mouse out 
    }); 
}); 

Apuesto a que jQuery tiene una función que envuelve todo esto para usted.

Edición: Ah sí, jQuery plugin to the rescue

Answer 4

Mi solución es fácil. Retrasar menú abierto si el usuario mantiene MouseEnter en obj más de 300 ms:

var sleep = 0; 
$('#category li').mouseenter(function() { 
    sleep = 1; 
    $('#category li').mouseleave(function() { 
     sleep = 0; 
    }); 
    var ob = $(this); 
    setTimeout(function() {       
     if(sleep) { 
      // [...] Example: 
      $('#'+ob.attr('rel')).show(); 
     } 
    }, 300); 
}); 

Answer 5

totalmente de acuerdo que hoverIntent es la mejor solución, pero si quieres pasar a ser un césped lamentable que trabaja en un sitio web con un largo proceso para su aprobación de plugins jQuery, aquí es una solución rápida y sucia que funcionaba bien para mí:

$('li.contracted').hover(function() { 
    var expanding = $(this); 
    var timer = window.setTimeout(function() { 
     expanding.data('timerid', null); 

      ... do stuff 

    }, 300); 
    //store ID of newly created timer in DOM object 
    expanding.data('timerid', timer); 
}, function() { 
    var timerid = $(this).data('timerid'); 
    if (timerid != null) { 
     //mouse out, didn't timeout. Kill previously started timer 
     window.clearTimeout(timerid); 
    } 
}); 

Ésta es sólo para expandir una <li> si el ratón ha estado en él durante más de 300 ms.

Answer 6

En 2016 la solución de la Media Luna fresco no funcionó como se esperaba para mí, así que se me ocurrió esto:

$(selector).hover(function() { 
    hovered = true; 
    setTimeout(function() { 
     if(hovered) { 
      //do stuff 
     } 
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay 

}, function() { 
    hovered = false; 
});