這是今天寫到的題目,一開始寫的時候遇到一點障礙,但想通之後其實非常簡單。
題目: 預測 console.log 出現的順序,並用 async / await 重寫
function test1(callback) { setTimeout(() => { console.log("test1"); callback(); }, 2000); } function test2(callback) { setTimeout(() => { console.log("test2"); callback(); }, 1000); } function main(callback) { test1(() => { test2(() => { callback(); }) }) } main(() => { console.log("main") })
先看第一部分。預測蠻容易的,就是先執行完步驟一,再把 callback function 交給步驟二執行。
test1 會先出現, 它的 callback 是 test2(() => { callback() })
test2 出現,它的 callback 是 () => { callback() }
main 出現了。
一開始是以為只能改寫 main 這個 function,後來問清楚是 3個 function 都可以重寫。那就簡單很多了。
function test1(callback) { return new Promise((resolve) => { setTimeout(() => { console.log("test1"); resolve(callback) }, 2000); }) } function test2(callback) { return new Promise((resolve) => { setTimeout(() => { console.log("test2"); resolve(callback) }, 1000); }) } const main = async function (callback) { const cb1 = await test1(callback) const cb2 = await test2(cb1) cb2() } main(() => { console.log("main") })