Why is my synchronous code executing asynchronously? - reactjs

Question

I'm trying to run some synchronous function which should wait for a certain time and then return control. But for some reason, it keeps executing asynchronously, or at least that's how it looks.
This is the code:
function pause(ms) {
var dt = new Date();
while (new Date() - dt <= ms) {
/* Do nothing */
}
}
console.log("start calculation..");
pause(3000);
console.log("calculation finished!");
this immediately shows the following in the console:
start calculation..
calculation finished!
There is no delay at all, as if the pause function is executed asynchronously.
I've tried 3 different versions of the pause function, it doesn't make any difference.
You can see this in the sandbox I put the code in.
(you must go to preferences - sandbox.config.json and turn of "Infinite loop protection" for it to work)
Why isn't the code running synchronously, first showing the "start calculation..." message, and then the second message after a 3 second delay?
Is there a better way to simulate running a time-expensive synchronous function?

Answer 1

Since my question has only been partially answered, I will provide the solution myself, in case other people have similar issues:
First of all, this code now works as intended in the console of Chrome, Chromium and Firefox. It didn't before, so perhaps there's been an upgrade to the javascript engine in this regard.
When running the code in the provided CodeSandbox though, it still logs the two lines simultaneously, after a 3 seconds delay.
As people have pointed out, 2 things could possibly be the cause of this:
the compiler removing empty loops
the console messages not refreshing as long as the loop is running
This code will fix both issues:
function pause(ms, start=new Date()) {
while (new Date() - start <= ms) {
setTimeout(()=>pause(ms,start))
}
}
console.log("start calculation..");
pause(3000);
console.log("calculation finished!");
Calling a SetTimeout (even with a 0 ms delay) will cause the rest of the code execution (a recursive function call) to be thrown back on the event loop for later processing, after allowing for the execution of event callbacks first. This ensures other events - such as logging of the console - will not be blocked.
It also puts some actual code inside the loop, so that the loop will not be removed by any compiler code optimisation.