Si el elemento ha sido 'mouseover'ed por 500ms, ejecute la función con jQuery

Question

Para la cordura de mis usuarios, quiero que se ejecute un evento' mouseover 'después de que el selector haya estado suspendido durante medio segundo en vez de tan pronto como flíquelo.

La primera vez que probé una función setTimeout pero que se ejecuta por el tiempo que el elemento permanezca suspendido, creo que no creo demasiado. También pasé un día (encendido y apagado) buscando (y jugando a Pacman) sin resultado, a menos que esté buscando las cosas equivocadas.

Me gustaría mantener este plugin-less si podemos, puramente para la velocidad de ejecución & mantenencia.

$("#mySelector").mouseover(function(){ 
    // Run after 500ms 
    $(this).addClass("hasBeen500ms"); 
}); 

Veamos si podemos resolver esto, ¡sé que tendrá tantas aplicaciones!

Answer 1

Prevenir de aparecer si el ratón está ya fuera por el momento ha caducado el retraso, además de eliminar la clase al retirar el ratón:

$("#mySelector").mouseenter(function() { 
    var el = $(this); 
    var timeoutId = setTimeout(function() { 
    el.addClass("hasBeen500ms"); 
    }, 500); 
    el.mouseleave(function() { 
    clearTimeout(timeoutId); 
    el.removeClass("hasBeen500ms"); 
    }); 
}); 
​ 

Answer 2

Consulte this SO question para establecer una devolución de llamada a la función setTimeout.

Answer 3

Estoy tratando de construir sobre Web Logic's answer

crear una variable para realizar un seguimiento del ratón si todavía está sobre dicho elemento:

var isMouseOver=false; 

$("#mySelector").mouseover(function(){ 
    isMouseOver=true;//set variable to gtrue 
    setTimeout(function() { 
       if(isMouseOver){ 
         $(this).addClass("hasBeen500ms"); 
       } 
       }, 500); 
}); 

también estableció mouseout de devolución de llamada, por lo que puede realizar un seguimiento del ratón si sigue ahí después de 500 ms.

$("#mySelector").mouseout(function(){ 
    isMouseOver=false;//set variable to false 
}); 

Espero que esto funcione!

Answer 4

.delay() no estaba funcionando desde .addClass() no es parte de la cola de la animación, por lo que en lugar de eso decidió animar algo nulo (decidido por visibility:visible ya que no sería pasar el cursor sobre un elemento invisible) y ejecute el añadir el coloque la clase en la función de devolución de llamada:

$('#mySelector').mouseenter(function(){ 
    $(this).animate({'visibility':'visible'},500,'swing',function(){ 
     $(this).addClass('hoverIntent'); 
    }) 
}); 

$('#mySelector').mouseleave(function(){ 
    $(this).removeClass('hoverIntent').stop().clearQueue(); 
}); 

en clase mouseleave se retira, y la cola de la animación se detiene y se despeja en caso de que sea antes de 500 ms. Puede agregar la misma funcionalidad en el mouseleave si quiere una demora antes de deshacer.

Answer 5

Otra opción es cancelar el tiempo de espera, si una persona se mueve el ratón antes de los 500 ms ha pasado:

var timer; 

$('#mySelector').mouseover(function() { 
    timer = setTimeout(function() {$(this).addClass('hasBeen500ms');}, 500); 
}); 

$('#mySelector').mouseout(function() { 
    clearTimeout(timer); 
}); 

Answer 6

suena como usted podría utilizar el plugin hoverIntent.

Answer 7

Si necesita optimizar un poco puede usar algo como eso. Este código está adaptado para los pines de google maps pero obtienes la idea

google.maps.event.addListener(marker, 'mouseover', function(){ 
    this.timeout = setTimeout(markerClick.bind(this, false), 500) 
    google.maps.event.addListener(this, 'mouseout', function(){ 
    if(this.timeout){ 
     clearTimeout(this.timeout) 
     delete this.timeout 
    } 
    google.maps.event.clearListeners(this, 'mouseout'); 
    }.bind(this)) 
}.bind(marker))