DoEvents in JavaScript

I have the following:

$('body, a').addClass('cursor-wait');
for (var I=0, L = myArray.length; I < L; I++) {
   // tight loop here
}
$('body, a').removeClass('cursor-wait');

But I'm not sure the cursor:wait icon is showing up immediately.

Q: Is there a way to tell say "Do开发者_开发问答Events" in JavaScript, such that I know that the DOM is being updated before it goes into the loop?

Maybe using the setTimeout method.

---

Here's what is happening:

The browser instance handling your page is single threaded. The change to the DOM happens right away. However, while your script is running, the browser is blocked and not able to run its layout manager which updates the page according to the CSS classes have changed. You are correct that setTimeout is the best way to cede control to the layout manager and see your changes on the screen. You don't even need to set a delay, simple act of calling setTimeout allows the layout manager a chance to redraw the page.

$('body, a').addClass('cursor-wait');
setTimeout(function () {
    for (var I=0, L = myArray.length; I < L; I++) {
       // tight loop here
    }
    $('body, a').removeClass('cursor-wait');
});

---

No need to, addClass changes the DOM directly so when your for loop runs cursor-wait has been added.

Why are you adding cursor-wait to the body tag and all a tags?

---

I found another solution: for DOM update enough to scroll your page for 1 pixel with window.scrollBy(0, 1);