Bloklardaki renkleri değiştirme

Question

4 blok vardır. Her birini sırayla arka plan rengini kırmızıya çevirmem gerekiyor. İkinci turda bir hata alıyorum. Nasıl düzeltilir?

var spanElems = [].slice.call(document.querySelectorAll('.block__item')), 
 
    i = 0, timer, prev; 
 

 
(function foo() { 
 
    spanElems[prev || 0].style.background = ''; 
 

 
    prev = i; 
 
    spanElems[i++ % spanElems.length].style.background = 'red'; 
 
    console.log(i, prev); 
 
    timer = setTimeout(foo, 3000); 
 
})();

.block { 
 
    margin-top: 100px; 
 
} 
 

 
.block__item { 
 
    padding: 10px; 
 
    border: 2px solid #ccc; 
 
}

<div class="block"> 
 
    <span class="block__item">1</span> 
 
    <span class="block__item">2</span> 
 
    <span class="block__item">3</span> 
 
    <span class="block__item">4</span> 
 
</div>

Sandbox: http://jsbin.com/lowimewegu/edit?html,output

Answer 1

Sorun şu ki, prev spanElems.length'den daha büyük biter, dolayısıyla spanElems [önceki] undefined. Kullanın: prev = i % spanElems.length; yerine prev = i;

Answer 2

Eh, hata null tarzı özelliğini alamayan ve prev değişken hiç geri sıfırlamak alır görünür olmadığını gösterir 4'e ulaştıktan sonra 0'a kadar, yani prev'un sorun olduğu anlaşılıyor.