Is javascript synchronous when manipulating the DOM?

Question

I have a form with a type field input. I have several radio blocks, and depending on which one I click from, the value in the input type field will be updated. After that, I will call the Javascript function to perform a specific action, and the function will use the updated amount (text) in the input field.

Of course, it is safer to pass this amount of the function itself, but can I rely on Javascript to update the DOM first, display the value of the update input field, and thereby return it through document.getElementById("input-quantity").valueand using it in the function? Or can the function get the "old" value if updating the DOM takes some time?

Answer 1

As you said, it is preferable to pass the value of the function.

But yes, setting the input value is synchronous; in what you described, you will reliably get the updated value, cross browser. Other DOM manipulations (inserting elements, deleting them, moving them) are also synchronous, although the user may not see the result until your JavaScript code completes, allowing the browser to use the stream to redraw the display. (Although JavaScript is not essentially single-threaded, browsers use the same main UI thread to run your JavaScript code and usually also use this thread to refresh the display.)