事件循环中的事件队列和任务队列

事件循环中的事件队列和任务队列

EvenLoop中执行优先级是：同步任务>异步任务

同步任务没什么好说的，就是顺序执行，优先级最高，执行完当前栈中同步任务再去执行其他的消息队列。

异步任务我们通常分为宏任务和微任务，但是任务队列确不只有宏任务队列和微任务队列，还有我们的事件队列。

当某一事件被触发（ex:click），我们其事件任务添加到事件队列中。

当执行栈中的宏任务执行完毕，且清空完微任务队列会监测事件队列是否有任务待执行，如果有则执行没有则渲染页面。

也就是说，在下一次事件循环之前，会清空事件列队。

<script>
        //测试事件队列与任务队列优先级
        console.log("===同步从这里开始===")
        setTimeout(() => {
            //异步宏任务
            let now = (new Date()).getTime(); //设定当前时间

            while ((new Date()).getTime() - now < 1000) {} //暂停五秒
            console.log("setTimeout[1]")
        }, 0)

        setTimeout(() => {
            //异步宏任务
            console.log("setTimeout[2]")
        }, 0)

        const p = new Promise((resolve, reject) => {
            //异步微任务
            resolve("resolve success");

        })
        p.then((data) => {
            console.log(data)
        })

        const bt = document.getElementById('bt');
        //事件任务
        bt.addEventListener('click', () => {
            console.log("点了一下")
        })

        function wait() {
            let now = (new Date()).getTime(); //设定当前时间
            while ((new Date()).getTime() - now < 1000) {} //暂停一秒
            console.log("wait end")
        }
        wait();
        console.log("===同步代码结束===")
    </script>