Как изменить каждый элемент с задержкой?

Question

Допустим хочу чтобы каждый элемент(elem) с задержкой изменил цвет на красный. Мой нерабочий код:

<div class = "elem"></div>
<div class = "elem"></div>


let b  = document.querySelectorAll('.elem');
for (var i = 0; i < b.length; i++){
   setTimeout(function(){
      b[i].style.backgroundColor= "red";
   },1000)
}

Answer 1

let b  = document.querySelectorAll('.elem');
(function nextRed(i = 0){
   if(i < b.length){
      b[i].style.backgroundColor= "red";
      setTimeout(nextRed, 1000, ++i);
   }
})();

.elem{
width: 20px; height: 20px;
border: 1px solid black;
}

<div class = "elem"> </div>
<div class = "elem"> </div>
<div class = "elem"> </div>
<div class = "elem"> </div>
<div class = "elem"> </div>
<div class = "elem"> </div>
<div class = "elem"> </div>
<div class = "elem"> </div>
<div class = "elem"> </div>