Делаю простенький видеоплеер с помощью <video>
Хочу сделать так, чтобы панель с кнопками внизу скрывалась через 3 секунды после последнего движения мышки.
<div id="controlbar" style="visibility: hidden;"></div>// ну якобы панель с кнопками
document.getElementById("videoPlayer").onmousemove = function() {
clearTimeout(timer); // сбиваю запущенный на предыдущем движении мышки таймер
showcontrolbar(); // показываю панель
var timer = setTimeout(hidecontrolbar, 3000); // скрываю панель через 3с
}
В итоге получаю следующее: если двинуть мышкой и не трогать, то все корректно, а если двигать мышкой в течении 5+ секунд, то через 3 секунды панель начинает адово мигать, т.к. не прекратившееся движение мыши вызывает панель, а таймер из прошлого скрывает ее.
Как сделать так, чтобы панель появлялась при первом же сдвиге мышки и пропадала после того как перестать ею двигать на 3 секунды?
p.s. Функциии showcontrolbar и hidecontrolbar - по одной строчке кода. Банальное управление стилем visibility через document.getElementById
p.s.s Если в начале функции прописать
if (timer) alert("i`m alive!");
то ничего не произойдет! Выходит, мой clearInterval ничего не останавливает, т.к. на момент запуска функции почему-то нету такого таймера, хотя он по любому должен был работать с предыдущего движения мышки.