欣迪

這是今天寫到的題目,一開始寫的時候遇到一點障礙,但想通之後其實非常簡單。

題目: 預測 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")
})

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。