lovecoding
/
W0407


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // js是单线程，同一个时间只能做一件事，执行顺序：自上之下执行。所以，实现异步通过eventLoop。  
        // 机制eventLoop
        // 事件循环机制。
        // js引擎在一次事件循环中，会先执行js线程的主任务，然后会去查找是否有微任务microtask（promise），
        // 如果有那就优先执行微任务，如果没有，在去查找宏任务macrotask（setTimeout、setInterval）进行执行  
        // js是单线程的，但是ajax和setTimeout在浏览器里面会多开一个线程
        // 宏任务:setTimeout setInterval setImmediate(ie下 生效) MessageChannel(消息通道)  
        // 微任务:Promise.then MutationObserver (监听dom节点更新完毕) process.nextTick()
        // 小结:
        // 代码从上到下执行，
        // 会先执行同步的代码，再执行异步，
        // 立即检查微任务队列 一次性清空所有的微任务
        // 微任务执行完毕之后，再从宏任务中去取一个宏任务队列执行

        // 先执行主线程同步代码（主任务栈清空）
        // 立即检查微任务队列，一次性清空所有微任务
        // 微任务全部执行完，再从宏任务队列取出一个宏任务执行
        // 这个宏任务执行完后，再次清空微任务队列
        // 不断循环，就是事件循环 EventLoop
        // setTimeout(function () {
        //     console.log("1");
        // });
        // new Promise(function (resolve) {
        //     console.log("2");
        //     resolve();
        // }).then(function () {
        //     console.log("3");
        // });
        // console.log("4");


        console.log(1)
        setTimeout(function () {
            console.log(2);
            let promise = new Promise(function (resolve, reject) {
                console.log(7);
                resolve()
            }).then(function () {
                console.log(8)
            });
        }, 1000);
        setTimeout(function () {
            console.log(10);
            let promise = new Promise(function (resolve, reject) {
                console.log(11);
                resolve()
            }).then(function () {
                console.log(12)
            });
        }, 0);
        let promise = new Promise(function (resolve, reject) {
            console.log(3);
            resolve()
        }).then(function () {
            console.log(4)
        }).then(function () {
            console.log(9)
        });
        console.log(5)


        // console.log('1');
        // setTimeout(function () {
        //     console.log('2');
        //     new Promise(function (resolve) {
        //         console.log('4');
        //         resolve();
        //     }).then(function () {
        //         console.log('5')
        //     })
        // })
        // new Promise(function (resolve) {
        //     console.log('7');
        //     resolve();
        // }).then(function () {
        //     console.log('8')
        // })
        // setTimeout(function () {
        //     console.log('9');
        //     new Promise(function (resolve) {
        //         console.log('11');
        //         resolve();
        //     }).then(function () {
        //         console.log('12')
        //     })
        // })

        // setTimeout(() => {
        //     console.log(1)
        // }, 0)
        // new Promise((resolve) => {
        //     console.log(2)
        //     resolve()
        // }).then(() => {
        //     console.log(3)
        // }).then(() => {
        //     console.log(4)
        // })
        // console.log(5)

        // const first = () =>
        //     new Promise((resolve, reject) => {
        //         console.log(3);
        //         let p = new Promise((resolve, reject) => {
        //             console.log(7);
        //             setTimeout(() => {
        //                 console.log(5);
        //                 resolve(6);
        //             }, 0);
        //             resolve(1);
        //         });
        //         resolve(2);
        //         p.then((arg1) => {
        //             console.log(arg1);
        //         });
        //     });
        // first().then((arg2) => {
        //     console.log(arg2);
        // });
        // console.log(4);


        // setTimeout(function () { console.log(1), 0 });
        // new Promise(function (resolve) {
        //     console.log(2); // 2
        //     for (var i = 0; i < 10000; i++) {
        //         if (i == 9999) {
        //             resolve()
        //         }
        //     }
        //     console.log(3)
        // }).then(function () {
        //     console.log(4)
        // })
        // console.log(5)

        setTimeout(() => {
            console.log("0");
        }, 0);
        new Promise((resolve, reject) => {
            console.log("1");
            resolve();
        })
            .then(() => {
                console.log("2");
                new Promise((resolve, reject) => {
                    console.log("3");
                    resolve();
                })
                    .then(
                        () => {
                            console.log("4");
                        },
                    )
                    .then(
                        () => {
                            console.log("5");
                        },
                    );
            })
            .then(
                () => {
                    console.log("6");
                },
                () => { 
                    // console.log("10")
                }
            );
        new Promise((resolve, reject) => {
            console.log("7");
            resolve();
        }).then(() => {
            console.log("8");
        })
    </script>
</body>

</html>