Как видно из заголовка, страница, над которой я работаю, запускает событие hover при загрузке страницы.
Javascript
// Random Color Function
var repeater;
function rnd_color(){
document.getElementById('logo').style.fill = '#'+Math.floor(Math.random()*16777215).toString(16);
repeater = setTimeout( function(){ rnd_color(el) }, 100);
};
// Logo Hover
var logo = document.getElementById('logo');
logo.addEventListener('mouseover', rnd_color, false);
logo.addEventListener('mouseout', function(){
clearTimeout(repeater);
this.style.fill = '#000';
});
Вышесказанное, конечно, помещено в оболочку DOMContentLoaded.
HTML
<svg class='menu-logo' id='logo' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 105.5"> <!-- PATHS AND FILLS HERE --> </svg>
Так что эта функция - просто забавное пасхальное яйцо - когда вы наводите курсор мыши на svg, она запускает новый цвет заливки каждую 1/10 секунды.Все остальное в нем работает просто отлично, за исключением того, что при загрузке страницы сразу начинает работать цветовая функция.Как только вы наведете указатель мыши, соответствующее событие mouseout позаботится о пополнении svg до # 000.
Еще более странно, что при загрузке кэшированной версии страницы ошибка исчезает.Это происходит только при совершенно новой загрузке страницы.Есть ли вероятность того, что это какое-то состояние гонки, даже если оно помещено в соответствующий обработчик событий?Спасибо!