<style>
  div {width:50px; height:50px; margin:5px;}
  .d1 {background-color:yellow;}
  .d2 {background-color:red;}
</style>

<div id="r1" class="d1" onclick="this.className = 'd2';"></div>
<div id="r2" class="d1" onclick="this.className = 'd2';"></div>
<div id="r3" class="d1" onclick="this.className = 'd2';"></div>
<div id="r4" class="d1" onclick="this.className = 'd2';"></div>

<script type="text/javascript">
    document.getElementById("r1").click();
    ////проверить если класс r1 = d2, продолжаем
    ////ждем 2 секунды
    document.getElementById("r2").click();
    ////проверить если класс r2 = d2, продолжаем
    ////ждем 2 секунды
    document.getElementById("r3").click();
    ////проверить если класс r3 = d2, продолжаем
    ////ждем 2 секунды
    document.getElementById("r4").click();
</script>

<script>
function classEdit(){
    d1 = document.getElementsByClassName('d1')[0];
    if(d1){
        d1.className = 'd2';        
        setTimeout(classEdit, 2000);
    }
}


</script>

    <div id="r1" class="d1" onclick="classEdit()">d1</div>
    <div id="r2" class="d1">d2</div>
    <div id="r3" class="d1">d3</div>
    <div id="r4" class="d1">d4</div>