js代码执行顺序简单介绍,详细说明js的执行过程

大家好，小编为大家解答js代码执行顺序简单介绍的问题。很多人还不知道详细说明js的执行过程，现在让我们一起来看看吧！

1、promise执行顺序

正常顺序执行 -> then -> setTimeouts -> then中 setTimeouts

如下例：

    <>
      console.log(1)
      const p = new Promise((resolve) => {
        console.log(2)
        resolve()
      })
      console.log(3)
      setTimeout(() => {
        console.log(4)
      }, 0)
      p.then(() => console.log(5))
      setTimeout(() => {
        console.log(6)
      }, 0)
      console.log(7)
    </>

输出：1 2 3 7 5 4 6

分析：

正常顺序执行：输出1 2 3 7；
then：输出5；
setTimeouts ：输出4 6。

2、js 宏任务和微任务执行顺序

具体执行过程
首先 JavaScript 引擎会执行一个宏任务，注意这个宏任务一般是指主干代码本身，也就是目前的同步代码快码论文。执行过程中如果遇到微任务，就把它添加到微任务队列中。宏任务执行完成后，立即执行当前微任务队列中的微任务，直到微任务队列被清空。微任务执行完成后，开始执行下一个宏任务。如此循环往复，直到宏任务和微任务被清空。

宏任务：主代码块、setTimeout、setInterval、DOM事件、AJAX请求。
微任务：Promise、async/await、process.nextTick。

如下例

//主线程直接执行
console.log('1');
//丢到宏事件队列中
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
//微事件1
process.nextTick(function() {
    console.log('6');
})
//主线程直接执行
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    //微事件2
    console.log('8')
})
//丢到宏事件队列中
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

输出结果

1->7->6->8->2->4->3->5->9->11->10->12

分析过程：

主代码块作为宏任务最先运行：输出1，7；
setTimeout分发到宏任务事件队列Event Queue中；
process.nextTick，Promise.then分发到微任务事件队列Event Queue中；
此时，主代码块执行完毕，即第一个宏任务执行完毕，开始执行微任务，输出 6，8；
第一个微任务执行完毕，开始执行第二个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务process.nextTick，输出2，4，3，5；
开始执行第三个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务，输出9,11,10,12。

总结
1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。
2、系统将微任务执行完以后，才会去执行下一个宏任务。
3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。
4、宿主环境提供的属于宏任务：例如setTimeout。由语言标准提供的属于微任务：例如promise.then。可以以此来区分宏任务和微任务。
 

总结自：JavaScript--Promise执行顺序_js promise 执行顺序_两三星火的博客-CSDN博客