關於js異步編程的理解與練習

js小白剛學異步, 有錯誤的地方及理解希望大家及時指出,謝謝大家

重點檢查代碼的執行順序

---

.then和.catch後面是回調函數, 回調函數是需要加到event loop隊列等待執行的(按加入順序執行, FIFO先進先出)

---

Event Loop是一個回調函數隊列。當異步函數執行時，回調函數會被壓入這個隊列。JavaScript引擎直到異步函數執行完成後，纔會開始處理事件循環。這意味着JavaScript代碼不是多線程的，即使表現的行爲相似。事件循環是一個先進先出（FIFO）隊列，這說明回調是按照它們被加入隊列的順序執行的。

---

<script>
        let p = (time) => {
            return new Promise((res, err) => {
                if (time > 3000) {
                    console.log(time)
                    res(`時間爲${time}`)
                    console.log('已經執行完')
                } else {
                    err('時間小於3秒')
                }
            })
        }
        // (1)先輸出 0
        console.log(0)

        // (2)再輸出 4000 已經執行完
        // .then .catch是回調函數
        // 回調函數加入了 Event Loop 隊列等待執行

        p(4000).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })

        // (3)再輸出1
        // (4)再輸出2
        console.log(1)
        console.log(2)

        // (5)再輸出5000 已經執行完
        // .then .catch是回調函數
        // 回調函數加入了 Event Loop隊列等待執行

        p(5000).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })

        // .then .catch是回調函數
        // 回調函數加入了 Event Loop隊列等待執行

        p(1000).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
        /*
            最後輸出結果:
            0
            4000
            已經執行完
            1
            2
            5000
            已經執行完
            時間爲4000
            時間爲5000
            時間小於3秒
        */
    </script>

---

JavaScript異步編程可參考:
Javascript異步編程的4種方法–阮一峯的網絡日誌
js-異步機制與同步機制