изменения элемента, примененные в «каждом» l oop, не отображаются до окончания цикла

Question

У меня есть jquery каждый l oop, который применяет класс к набору элементов - однако, изменение не отражается до тех пор, пока l oop не будет выполнено. (Прежде чем перейти к моей методологии, это для целей отладки на внутреннем интерфейсе, который не публикуется c -facing.)

var x = 0;
function doTheThing() {
    var ids=[10, 20, 30]; 
    $.each(ids,function(a,b){
        $("#field_" + b).click(); // should do something that shows in the interface
        $("#field_" + b).addClass("workedon"); // should also do something
        sleep(2000); // wait a bit to see that it happens - which it doesn't, not yet
    });
    console.log('done')
    // and all the changes made above show up all at once
}    
j(".theFields").click(function(evt){
    evt.preventDefault();
    // all the stuff happens here
    // except what's supposed to show in the interface
    console.log('doing stuff');
    $(this).css("border", "1px solid red"); // << doesn't happen
    x += 1; // << no problem
    console.log(x);
});

function sleep(ms) {
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < ms);
}

doTheThing();

output:

doing stuff
1
doing stuff
2
doing stuff
3
done

Итак, ничего не происходит, пока мы находимся в oop. После l oop все изменения появляются сразу. Что-то я делаю неправильно? (Пожалуйста, не зацикливайтесь на функции сна. Я знаю, что есть более современный способ, но это не мой вопрос.)