打赏

js 队列和事件循环

1.示例代码

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>js队列</title>
    </head>

    <body>
        <script type="text/javascript">
            
            setTimeout(function() {
                console.log('timeout1')
            },0)
            setTimeout(function() {
                console.log('timeout2')
            },10)
            new Promise(function(resolve) {
                console.log('promise1')
                for(var i = 0; i < 1000; i++) {
                    i == 99 && resolve()
                }
                console.log('promise2')
            }).then(function() {
                console.log('then1')
            }).then(function(){
                console.log('then2')
            })
            console.log('global1')
        </script>
    </body>

</html>

 

控制台输出：

 

2、队列

setTimeout、setInterval和事件绑定中的代码，通过队列来执行。不是函数调用栈。

任务队列分为：宏任务（macro-task）和微任务（micro-task）。

macro-task：script（整体代码）、setTimeout、setInterval、I/O

micro-task:Primise

 3、执行顺序

（1）宏任务的script

（2）执行micro-task，执行完后 第一次事件循环结束

（3）在执行宏任务中的其他任务，如setTimeout。在执行在其他任务如setTimeout可能产生的微任务。微任务执行完毕后再执行其他宏任务队列中的任务。直到宏任务队列中的任务都被执行一遍，并且清空了微任务，第二次循环结束。

（4）如果第二次循环中产生了新的宏任务，或者之前的宏任务没有满足执行条件（如有延迟时间或等待事件触发），那么会继续以同样的顺序重复循环。

posted @ 2018-07-24 18:50  孟繁贵  阅读(650)  评论(0)  编辑  收藏  举报
TOP