Разбор переключателя 6-ти цветов

Question

Есть скрипт, который автоматически переключает 3 цвета поочередно в трех блоках. Сначала идет: красный цвет > сброс цвета > золотой > сброс >светло-зеленый > сброс и так по кругу.

Но я не могу понять, как работает и что делает colorCount%2 я отметил это место в коде. Ведь любое число делится на 2 с остатком? И почему console.log(countElem); показывает в консоли дублирование item?

let a = document.querySelectorAll('.item');

let storage = [
{color: "red", interval: 1000},
{color: "", interval: 1000},
{color: "gold", interval: 1000},
{color: "", interval: 1000},
{color: "mediumSeaGreen", interval: 1000},
{color: "", interval: 1000},
];

let countElem = 0;
let colorCount = 0;

let go = setTimeout(function change(){

if(countElem === a.length){
countElem = 0;  
}   
console.log(countElem);   // **** почему номер элементов дублируется в консоли? ****

if(colorCount === storage.length){  
colorCount = 0; 
}   
    
a[countElem].style.background = storage[colorCount].color;
  
go = setTimeout(change, storage[countElem].interval);   

if(colorCount % 2){        // **** как работает эта строка? ****
countElem = countElem +1;
}   
    
colorCount = colorCount +1; 
},1000);

body{   
user-select:none;
}

.main{
margin-top:20px;
margin-left:200px;  
width:250px;
height: 100px;  
background: blue;
}

.item{
height: 100%;   
background: gray;   
margin-bottom: 30px;
}

<div class = "main">
<div class = "item" data-color='red'>1</div>
<div class = "item" data-color='blue'>2</div>
<div class = "item" data-color='orange'>3</div>
</div>

Answer 1

if(colorCount % 2) - это условие будет выполняться только если остаток от деления не будет равен 0 (а он не будет равен 0 если colorCount равняется 2, 4, 6, и так далее)

По этой причине console.log(countElem); и выводит дубликаты, т.к. в циклических запусках setTimeout значение countElem изменяется через один цикл

БЛОГ НА HUSL

Разбор переключателя 6-ти цветов

Ответы (1 шт):