宏任务 微任务 执行顺序 练习题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    232323
    <script>
        /**
         *  进程 & 线程
         *  一个进程中可能包含多个线程
         *  
         *  浏览器的多线程的
         *    HTTP 网络线程
         * 
         *  异步编程的代码
         * 
         *    [宏任务]
         *    + 定时器,事件绑定，ajax/fetch
         * 
         *    [微任务]
         * 
        */
     
       
        // setTimeout(()=>{
        //     console.log(1);
        // },20) 
        // console.log(2); 
        // setTimeout(()=>{
        //     console.log(3);
        // },10) 
        // console.log(4);
        // console.time('AA'); 
        // for(let i=0;i< 900000000;i++){
        //     // do ---
        // } 
        // console.timeEnd('AA');  // AA: 0.0029296875 ms
        // console.log(5); 
        // setTimeout(()=>{
        //     console.log(6);
        // },8) 
        // console.log(7); 
        // setTimeout(()=>{
        //     console.log(8);
        // },15) 
        // console.log(9);


        // setTimeout(()=>{
        //     console.log(1);
        // },0)
        // console.log(2);
        // // while(1){

        // // }
        // console.log(3);
        // setTimeout(()=>{
        //     console.log(4);
        // },10)
        // console.log(5);


        // async function async1(){
        //     console.log('async1 start');
        //     await async2();
        //     console.log('async1 end');
        // } 
        // async function async2(){
        //     console.log('async2'); 
        // } 
        // console.log('script start'); 
        // setTimeout(()=>{
        //     console.log('setTimeout');
        // },0) 
        // async1(); 
        // new Promise(function(resolve){
        //     console.log('Promise1');
        //     resolve();
        // }).then(function(){
        //     console.log('Promise2');
        // }) 
        // console.log('script end');


        // 第 1 题
        // let body = document.body;
        // body.addEventListener('click',function(){
        //     Promise.resolve().then(()=>{
        //         console.log(1);
        //     }) 
        //     console.log(2);
        // }) 
        // body.addEventListener('click',function(){
        //     Promise.resolve().then(()=>{
        //         console.log(3);
        //     })
        //     console.log(4);
        // })

        // 2 1 4 3


        // 第2题
        // console.log('start');
        // let intervalId;
        // Promise.resolve().then(()=>{
        //     console.log('p1');
        // }).then(()=>{
        //     console.log('p2');
        // }) 
        // setTimeout(()=>{
        //     Promise.resolve().then(()=>{
        //         console.log('p3');
        //     }).then(()=>{
        //         console.log('p4');
        //     })
        //     // intervalId = setInterval(() => {
        //     //     console.log('interval');
        //     // }, 3000);
        //     console.log('timeout1');
        // },0)

        //  start  p1  p2  timeout1 p3  p4  interval


        // 第3题
        // setTimeout(()=>{
        //     console.log('a');
        // }) 
        // Promise.resolve().then(()=>{
        //     console.log('b');
        // }).then(()=>{
        //     return Promise.resolve('c').then(data=>{
        //         setTimeout(()=>{
        //             console.log('d');
        //         })
        //         console.log('f');
        //         return data;
        //     })
        // }).then(data=>{
        //     console.log(data);
        // }) 
        // b  f  c a d


        // 第4题
        function func1(){
            console.log('func1 start');
            return new Promise(resolve=>{
                resolve('ok');
            });
        }
        function func2(){
            console.log('func2 start');
            return new Promise(resolve=>{
                setTimeout(()=>{
                    resolve('ok');
                },10) 
            });
        } 
        console.log(1);
        setTimeout(async()=>{
            console.log(2);
            await func1();
            console.log(3);
        },20);
        for(let i=0;i<90000000;i++){}
        console.log(4);

        func1().then(result=>{
            console.log(5);
        })
        func2().then(result=>{
            console.log(6);
        }) 
        setTimeout(()=>{
            console.log(7);
        },0)
        console.log(8);

        // 1 4 func1 start  func2 start  start 8  5  2   func1 start 3  7 6
         
          
    </script>
</body>
</html>
posted @ 2021-07-28 10:50  13522679763-任国强  阅读(147)  评论(0)    收藏  举报