Quiero que cuando me desplace sobre el elemento cuente 4 segundos, por ejemplo, y luego realice la acción. Pero solo si el usuario realmente se desplaza sobre ese elemento durante 4 segundos, no quiero usar la función setTimeout.
Encontré este ejemplo:
¿Cómo verificar cuánto tiempo pasa el cursor sobre un elemento en javascript puro?
pero esto solo cuenta cuando el usuario hace mouseout. Quiero hacer un cálculo al pasar el mouse y, si pasan 4 segundos, hacer algo. ¿Cualquier sugerencia?
Como alternativa a la respuesta anterior con setInterval
var handle = null function enter() { handle = setTimeout(function() { alert('mouse in for 4s'); }, 4000); } function out() { clearTimeout(handle); } <button onmouseenter="enter()" onmouseout="out()">test</button>Aquí hay un ejemplo si el código no está claro, dígame en la sección de comentarios, proporcionaré más explicaciones si es necesario
const button = document.getElementById("hover") let date = null let timer button.addEventListener("mouseover", function () { if(!date) date = new Date() timer = setInterval(()=>{ if((new Date() - date) >= 4000) { console.log('Do Action') clearInterval(timer) } }, 1000) }, false) button.addEventListener("mouseout", function () { clearInterval(timer) date = null }) <body> <button id='hover'>Hover Me</button> </body>