如何同步延迟Javascript中的代码执行？

Question

我有一个程序，应该执行第一行并等待两秒钟，然后执行第二行，最后执行第三行。

console.log("Before Execution...");
setTimeout(() => console.log("Between"), 2000);
console.log("After Execution...");

但是我得到的输出是这样的：

Before Execution...
After Execution...
Between

我理解这是因为 setTimeout() 异步工作，但必须有办法进行真正的同步延迟。

Answer 1

不，不可能进行同步延迟。你必须像这样使用承诺：

const delay = n => new Promise(r => setTimeout(r, n));

async function main() {
    console.log("Before Execution...");
    await delay(1000);
    console.log("After Execution...");
}

main()

理论上，您可以将“之后”部分放入 setTimeout 回调中，但我不建议这样做。回调更难跟踪，并且经常导致意大利面条代码。

Answer 2

没有setTimeout总是异步的。但是我们可以定义自己的自定义超时函数并使其同步。

// Tell the browser that this function is asynchronous
async function myTimeoutFunc(delay) {
    // Await for the promise to resolve
    await new Promise((resolve) => {
        setTimeout(() => {
            // Resolve the promise
            resolve(console.log('Between'));
        }, delay);
    });
}

async function myMainFunc (){
  console.log("Before Execution...");
  await myTimeoutFunc(2000);
  console.log("After Execution...");
}

myMainFunc();

如何同步延迟Javascript中的代码执行？

How to synchronously delay code execution in Javascript?

javascript

synchronous