js中的事件循环

了解js中的同步和异步：

同步：代码自上而下有顺序的先后执行，一行一行执行。

异步：很多时候看起来像是和同步代码一起执行，相对于同步的代码一般都会最后执行。

事件循环，先执行同步 再执行异步。

事件循环：先执行一个宏任务（宏任务队列中） 再清空微任务队列中所有微任务。浏览器中一直在重复这个事情，所以叫事件循环。

第一次执行js ，整体的代码 会被当做一个 宏任务-执行。

宏任务队列 ：Macrotask Queue: ajax、setTimeout、setInterval、Dom监听等   

微任务队列： Microtask Queue: Promise的then回调、 Mutation Observer API、queueMicrotask

注意:每一次执行宏任务之前，都是要确保我微任务的队列是空的，也就是说从代码执行的顺序来说微任务优先于宏任务。

案例一：

        //异步： 
        //延时器和定时器都是异步 异步操作 异步任务 --宏任务
        console.log(1);//主线程
        setTimeout(() => {
            console.log(2);//宏任务队列
        }, 0)//交给浏览器  放到最后执行

        console.log(3);//主线程
        
        //微任务队列  异步任务队列 异步操作 异步任务
        queueMicrotask(function () { 
            console.log(4);//微任务队列
        })
        //1 3 4 2

案例二： 

        // 每一次执行宏任务之前，都是要确保我微任务的队列是空的，也就是说从代码执行的顺序来说微任务优先于宏任务。

        console.log(1);
        // 微任务队列(异步任务队列)--异步操作--异步任务
        queueMicrotask(function(){
            console.log(2);
        })
        // 延时器和定时器 都是异步操作--也叫异步任务--宏任务
        setTimeout(() => {
            console.log(3);
        }, 1000);

        queueMicrotask(function(){
            console.log(4);
        })
        console.log(5);
        //1 5 2 4 3

案例三： 

        console.log(1); //同步
        //Promise.then 是微任务
        new Promise(function(r) {
            //同步的代码
            console.log(2);
            r();
        }).then(function(){
            //异步的代码
            console.log(3);
        })
        console.log(4); //同步
        //1 2 4 3

案例四： 

        // 同步
        console.log(1);
        // console.log(2);
        // 微任务队列(异步任务队列)--异步操作--异步任务
        // 延时0ms的 异步操作
        queueMicrotask(function () {
            console.log(4);
        });
        // 
        // 延时器和定时器 都是异步操作--也叫异步任务--宏任务
        setTimeout(() => {
            console.log(2);
        });
        setTimeout(() => {
            console.log(6);
        });

        queueMicrotask(function () {
            console.log(5);
        });

        console.log(3);
        //1 3 4 5 2 6

案例五： 

        // 同步
        console.log(1);
        // console.log(2);
        // 微任务队列(异步任务队列)--异步操作--异步任务
        // 延时0ms的 异步操作
        queueMicrotask(function () {
            console.log(4);
        });
        // 
        // 延时器和定时器 都是异步操作--也叫异步任务--宏任务
        setTimeout(() => {
            console.log(2);

            queueMicrotask(function () {
                console.log(7);
            });

        });
        setTimeout(() => {
            console.log(6);
        });

        queueMicrotask(function () {
            console.log(5);
        });
        console.log(3);
        //1 3 4 5 2 7 6