如何在javascript中同步使用setTimeout？

Question

是否可以使用setTimout在下面提到輸出。 如果是，請分享您的想法：-

console.log("1st");
setTimeout(()=>{
   console.log("2nd");
},0);
console.log("3rd");

**輸出應該是**

1st
2nd
3rd

Answer 1

Majed Badawi 的回答顯示了一種實現您想要的方式的方法，但它只是一個類似於簡單地將您的第三個日志放在第二個之后的 setTimeout 回調中的構造。

這有重要的概念原因。

JavaScript 是一種事件驅動的語言，其中你有一個稱為事件循環的東西，它正在檢查新事件並不間斷地處理它們。

您在這里尋找的是一種使用setTimeout的方法，就像您在 PHP、C 或其他語言中使用sleep一樣。 它根本不存在。

sleep是一條阻塞指令：程序在繼續之前等待 X 秒。 如果您在 JavaScript 中執行此操作，您將阻止事件循環運行，您甚至不想嘗試執行此操作。 如果你真的堅持，你可以在一個while語句中檢查是否已經過了足夠的時間，這將在前端環境中凍結你的瀏覽器或阻止在后端環境中處理新請求。

更多關於這里https://cloudoki.com/js-dont-block-the-event-loop/

相反， setTimeout將在一段時間后向提供的偵聽器觸發事件​​，程序的其余部分（和事件循環）將繼續運行。

Answer 2

使用異步/等待：

 const foo = () => new Promise(resolve => { setTimeout(() => { console.log("2nd"); resolve(); }, 0); }); (async () => { console.log("1st"); await foo(); console.log("3rd"); })();

Answer 3

sleep不存在，但你可以自己做💤

 function sleep(ms) { return new Promise(r => setTimeout(r, ms)) } async function main() { console.log(1) await sleep(1000) console.log(2) await sleep(1000) console.log(3) await sleep(1000) return "done" } main().then(console.log, console.error)

認為async..await了？ 讓我們嘗試一個生成器 -

 function sleep(ms) { return Task(k => setTimeout(k, ms)) } function* main() { console.log(1) yield sleep(1000) console.log(2) yield sleep(1000) console.log(3) yield sleep(1000) return Task(k => k("done")) } function Task(runTask) { return { runTask, bind: f => Task(k => runTask(x => f(x).runTask(k))) } } function coroutine(f) { function then(v) { let {done, value} = f.next(v) return done ? value : value.bind(then) } return then() } coroutine(main()).runTask(console.log)

發電機太復雜了？ 讓我們嘗試一個低級抽象 -

 function sleep(ms, then) { setTimeout(then, ms) } function main(then) { console.log(1) sleep(1000, _ => { console.log(2) sleep(1000, _ => { console.log(3) sleep(1000, _ => { then("done") }) }) }) } main(console.log)