Народ, помогите разобраться с 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#