通过延迟函数javascript阻止执行

Question

I am using the following code to see if the JavaScript execution gets blocked while a synchronous function gets into a long loop.

function delayBySeconds(sec){
  let start = now = Date.now();
  while((now - start) < (sec * 1000)){
    //console.log(now);
    now = Date.now();
  }
}

const seconds = 20;
delayBySeconds(seconds);
console.log(`${seconds} seconds passed`);

It prints the message immediately which shows the execution doesn't wait for the called function to complete its loop. How does that work? I mean if the delayBySeconds function works properly, how does the message get printed immediately? It's only experimental, of course, it doesn't make sense I would use it for some practical delay.

Answer 1

It's a synchronous code execution. The console is waiting until the function is not executed fully. You are not seeing any delay because you are not performing any task inside the loop.

You can see the delay if you uncomment the console inside the while loop.

Answer 2

Because of the fact that JavaScript is always synchronous and single-threaded, it does not wait for your function execution to finish before moving on to next statement. Therefore, to properly wait for a function to finish execution, we used Promise/Then sort-of "framework" to make asynchronous call to function, ie waiting for it to complete before moving on. Now after ES2017, we can use async/await to kinda simplify the process.

Snippet using Promise

const delayBySeconds = sec => new Promise(resolve => {
  let start = now = Date.now();
  while((now - start) < (sec * 1000)){
    // console.log(now - start);
    now = Date.now();
  }
  resolve()
})

const seconds = 10;
delayBySeconds(seconds).then(()=>
console.log(`${seconds} seconds passed`))

snippet using async/await

const delayBySeconds = async sec => {
  let start = now = Date.now();
  while((now - start) < (sec * 1000)){
    // console.log(now - start);
    now = Date.now();
  }
  return
}

const main = async () => {
  const seconds = 7;
  await delayBySeconds(seconds)
  console.log(`${seconds} seconds passed`)
}

main()

Notice that async/await can only be used in an async function, so you have to wrap it up in a function if you are using native js. However, some, like Deno, a fairly recent backend js framework, has global support for async/await so you don't have to wrap it up in there.