宏任务微任务事件循环任务队列我还没有理解定时器等等

最新推荐文章于 2024-06-24 21:18:18 发布

SpringYoungYu

最新推荐文章于 2024-06-24 21:18:18 发布

阅读量205

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44917015/article/details/110218406

版权

<!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>
        // console.log( typeof a )
        // 对于未声明的变量进行操作

        // console.log( 0.5 === .5 )
        /* 
        微任务 宏任务 event-loop
        js是一种单线程的脚本语言
        在一行代码的执行过程中 不会存在同时执行的
        另外一行代码
        例如使用alert()以后console.log
        如果没有关闭弹框 控制台不会打印信息的

        所以如果全部代码都是同步执行的 就会出现问题
        阻塞问题；
        于是就有了异步事件的概念；

        微任务 宏任务；

        先是一个一个宏任务；
        在宏任务执行的过程中 可以添加一些微任务；
        在当前微任务没有执行完成 是不会去执行下一个宏任务的；

         */
        /* 
         面试题
         settimeout 是作为宏任务来执行的
         promise.then()就是代表性的微任务
         所有会进入的异步都是指的事件回调中的那部分代码；
         也就是说new promise 在实例化的过程中所执行的代码
         都是同步执行的 而在.then中注册的回调才是异步执行
         的，在同步代码执行完成后才回去检查是否有异步任务
         完成 并执行对应的回调 而微任务又会在宏任务之前
         执行
         */
        // setTimeout(_ => console.log(4))

        // new Promise(resolve => {
        //     resolve()
        //     console.log(1)
        // }).then(_ => {
        //     console.log(3)
        // })

        // console.log(2)
        /* 
        4
        1
        2
        3

        1234
         */
        setTimeout(_ => console.log(4))

        new Promise(resolve => {
            resolve()
            console.log(1)
        }).then(_ => {
            console.log(3)
            Promise.resolve().then(_ => {
                console.log('before timeout')
            }).then(_ => {
                Promise.resolve().then(_ => {
                    console.log('also before timeout')
                })
            })
        })

        console.log(2)
        /* 123before timeout also before timeout 4*/
        /* 
        实际情况 很少会这么简单的调用promise
        一般会在里面有其他的异步操作
        比如fetch fs.readFile 
        而这些其实就是相当于注册了一个宏任务 而非微任务；
        在规范中 promise的实现可以是微任务 也可以是宏任务
        但是普遍的共识表示（chrome这么做的），
        promise应该属于微任务阵营；
        所以哪些操作宏任务 哪些操作是微任务就很重要
        我也不知道 业界流行的说法
         */
         /* 
         node中的不管了
         浏览器中的
         i/o settimeout setinterval requestAnimationFrame 
         算是宏任务；

         MutationObserver Promise.then catch finally 
         算是微任务；
          */
          /* 
          async函数 在await之前的代码都是同步执行的；
          可以理解为await之前的代码为new promise时
          传入的代码，await之后的代码都是在promise.then
          中的回调；
           */
    </script>
</body>

</html>