В рамках изучения JS решил создать 3 div`а и сделать так, чтобы при наведении на них background-color рандомно менял цвет. Реализовал все таким способом:
(function getColor() {
const colors = ["red", "green", "blue", "black", "magenta", "pink"];
function getRandomIntInclusive(min, max) {
min = Math.ceil(0);
max = Math.floor(6);
let output = Math.floor(Math.random() * (max - min + 1)) + min;
return output;
}
function randomColor(someRndNumber, colorArray) {
let colorResult = colorArray[someRndNumber];
return colorResult;
}
let rndResult = getRandomIntInclusive();
let rndColor = randomColor(rndResult, colors);
const getColoredDivs = document.querySelectorAll(".coloredDiv");
getColoredDivs.forEach((elem) => {
elem.addEventListener("mouseover", () => {
elem.style.backgroundColor = rndColor;
getColor();
});
});
getColoredDivs.forEach((elem) => {
elem.addEventListener("mouseout", () => {
elem.style.backgroundColor = "white";
});
});
})();
И первые 10-12 итераций все работает, как я хочу. Цвета на бэках рандомно меняются при наведении курсора на див (представлены на экране, как три квадрата с черными границами), но затем начинается какая-то бесконечная лютая рандомизация цифр(я проверил добавив console.log в функции рандомизаторе). Браузер подвисает. Убить процесс можно только через диспетчер задач. Думаю, что проблема в том, что рандомизация значения от 0 до 6 происходит каждый раз, пока я вожу курсором по поверхности дива. Но, как предотвратить это я пока не знаю)
mouseover
., так как идёт вызов getColor и листенеры снова вешаются и копятся