[demouser]

Народ, помогите разобраться с JS

<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>

в реальном примере изменение класса происходит после аякс-запроса, поэтому происходит не сразу, и переходить к следующему клику нельзя пока этот класс не изменится
также нужна пауза в пару секунд

ps: с яваскриптом работаю впервые, основной язык c#