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:
- Function
perform()
runs, and it callslong_function(1)
first. - The
innerHTML
call gets sent. - The
sleepFor(1000)
function gets called, but the browser hasn't rendered theinnerHTML
change yet. - The live compiler runs through the
while
loop insleepFor()
, which is blocking by nature (it stops other JavaScript code from running but it also stops the browser from rendering). - Once the
while
loop is done, JavaScript proceeds to set theinnerHTML
of your element to "Done", but it never got to render thenumber
inlong_function()
.
If you want an interesting watch on the event loop, blocking and non-blocking JavaScript, here are some resources:
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
Post a Comment for "Javascript Does Not Update Status Div On Repeated Actions Triggered By Button"