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)如果第二次循环中产生了新的宏任务,或者之前的宏任务没有满足执行条件(如有延迟时间或等待事件触发),那么会继续以同样的顺序重复循环。

猜你喜欢

转载自www.cnblogs.com/mengfangui/p/9361910.html