I want when i hover on element to count 4 seconds for example and then do the action. But only if user really hover on that element 4 seconds, i dont want to use setTimeout function.
I found this example:
How to check how long you hover an element in pure javascript?
but this only count when user do mouseout. I want to do calculation on mouseover and if pass 4 seconds do something. Any suggestion?
As an alternative to the previous answer with 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>Here is an example if the code not clear tell me in comment section, i will provide some more explanation if needed
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>