通过延迟函数javascript阻止执行

Question

我正在使用以下代码查看 JavaScript 执行是否在同步函数进入长循环时被阻塞。

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`);

它立即打印消息，表明执行不等待被调用函数完成其循环。这是如何运作的？我的意思是如果 delayBySeconds 函数正常工作，消息如何立即打印？这只是实验性的，当然，我会用它来做一些实际的延迟是没有意义的。

Answer 1

这是一个同步代码执行。控制台一直在等待，直到函数未完全执行。您没有看到任何延迟，因为您没有在循环内执行任何任务。

如果您在 while 循环中取消注释控制台，您可以看到延迟。

Answer 2

由于 JavaScript 始终是同步的和单线程的，它不会等待您的函数执行完成，然后再继续执行下一条语句。因此，为了正确等待函数完成执行，我们使用 Promise/Then 之类的“框架”对函数进行异步调用，即在继续之前等待它完成。现在在 ES2017 之后，我们可以使用 async/await 来简化流程。

使用 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`))

sn-p 使用异步/等待

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()

注意 async/await 只能用在 async 函数中，所以如果你使用的是原生 js，你必须把它包装在一个函数中。但是，有些，例如 Deno，一个相当新的后端 js 框架，对 async/await 具有全局支持，因此您不必将其包装在其中。