При наведении на блок, появляется дочерний блок, после того, как курсор покинет пределы блока, дочерний скрывается. Если курсор случайно вышел за пределы блока, есть 3 секунды, чтобы вернуть его обратно и отменить скрытие. Для этого при повторном наведении должен отменяться таймаут, но отмены не происходит. Что не так в коде ниже?
let timerVolume = null;
document.querySelector('.volume').addEventListener('mouseenter', (e) => {
if(timerVolume) {
clearTimeout(timerVolume);
}
volumeBar.style.display = 'block';
document.querySelector('.volume').addEventListener('mouseleave', () => {
timerVolume = setTimeout(() => {
volumeBar.style.display = 'none';
}, 3000);
})
UPD: Консоль показала, что код внутри обработчика mouseleave выполняется несколько раз. Вешается два таймаута при втором mouseleave, три при третьем, четыре при четвертом... Если до этого момента ещё были надежды найти решение самому, то сейчас я вообще не понимаю каким образом это работает.
document.querySelector('.volume').addEventListener('mouseenter', (e) => {
if(timerVolume) {
clearTimeout(timerVolume);
console.log('delete', timerVolume);
}
volumeBar.style.display = 'block';
document.querySelector('.volume').addEventListener('mouseleave', () => {
timerVolume = setTimeout(() => {
volumeBar.style.display = 'none';
console.log('work ' + timerVolume);
}, 3000);
console.log('start', timerVolume);
})
Вывод консоли:
start 1
work 1
delete 1
start 2
start 3
delete 3
start 4
start 5
start 6
4 work 6
