JavaScript Does Not Update Status Div On Repeated Actions Triggered By Button

I have the following JavaScript. The attached code is extremely simplified version of rather complex auto-generated JavaScript that launches the same function on lots of objects (n

Solution 1:

This is how I understand what happens:

1. Function perform() runs, and it calls long_function(1) first.
2. The innerHTML call gets sent.
3. The sleepFor(1000) function gets called, but the browser hasn't rendered the innerHTML change yet.
4. The live compiler runs through the while loop in sleepFor(), which is blocking by nature (it stops other JavaScript code from running but it also stops the browser from rendering).
5. Once the while loop is done, JavaScript proceeds to set the innerHTML of your element to "Done", but it never got to render the number in long_function().

If you want an interesting watch on the event loop, blocking and non-blocking JavaScript, here are some resources:

http://latentflip.com/loupe/

This question is a bit misleading because of the title (innerHTML doesn't actually run asynchronously) but the answers are interesting:

innerHTML can't be trusted: Does not always execute synchronously