JS执行机制

JS执行机制

  1. 同步异步

    同步:按照顺序依次执行

    异步:先执行一部分,等拿到结果或等到相应时间后执行后续代码(计时器,ajax,读取文件)

    同步程序执行完之后执行异步程序

  2. 单线程

    js是单线程的,一个任务完成后才能执行另一个任务

    for(let i=0; i<2000; i++){
    	console.log(1)
    }
    setTimeout(()=>{console.log(2)}, 0)
    setTimeout(()=>{console.log(3)}, 0)
    setTimeout(()=>{console.log(4)}, 0)
    console.log(5)
    //先输出两千个1之后再输出5,2,3,4
    
  3. 执行顺序

    1. 同步

    2. nextTick(异步之前执行)

    3. 异步

    4. setImmediate(当前事件循环结束执行)

      事件循环会一直在任务队列里找任务执行

    setImmediate(() => {
        console.log(1)
    })
    process.nextTick(() => {
        console.log(2)
    })
    console.log(3)
    setTimeout(() => { console.log(4) }, 0)
    //当等待时间结束后再把 log(5) 添加到任务队列
    setTimeout(() => { console.log(5) }, 1000)
    setTimeout(() => { console.log(6) }, 0)
    console.log(7)
    
    //结果:3,7,2,4,6,1,5
    

4.宏任务与微任务

在 JS 中,异步任务又被分为宏任务与微任务

一、 执行script中代码,有一些是同步任务,有一些是异步任务,遇同步任务立即执行,遇异步任务分别丢入对应任务队列中(宏任务放进宏队列中,微任务放入微队列中),全局Script代码执行完毕后,同步任务执行完毕,栈Stack会清空
二、接着执行任务队列中的微任务,微任务执行结束后再执行宏任务

宏任务:整体script代码,计时器(setTimeout、setInterval),ajax,读取文件

微任务:promise.then

执行顺序:

  1. 同步程序

  2. process.nextTick(node独有)

  3. 微任务

  4. 宏任务

  5. setImmediate(node独有)

    console.log(1)
    async function async1() {
    	await async2()
        console.log(2)
    }
    async function async2() {
        console.log(3)
    }
    async1()
    setTimeout(() => {
        console.log(4)
    }, 0)
    new Promise(resolve => {
        console.log(5)
        resolve()
    }).then(function() {
        console.log(6)
    }).then(function() {
        console.log(7)
    })
    console.log(8)
    
    // 输出:1,3,5,8,2,6,7,4
    
    console.log(1);
    setTimeout(function () {
      console.log(2);
      new Promise(function (resolve) {
        console.log(3);
        resolve();
      }).then(function () {
        console.log(4);
      });
    });
    
    new Promise(function (resolve) {
      console.log(5);
      resolve();
    }).then(function () {
      console.log(6);
    });
    
    setTimeout(function () {
      console.log(7);
      new Promise(function (resolve) {
        console.log(8);
        resolve();
      }).then(function () {
        console.log(9);
      });
    });
    // 输出:1 5 6 2 3 4 7 8 9
    

    讲解:
    1.首先,先按照顺序执行同步任务:1 5
    2.同步任务执行完成了,开始执行异步任务,异步任务先微任务后宏任务,所以先执行promise.then中的6。微任务执行完毕,开始宏任务,第一个setTimeout中输出2 3 4
    4.接着执行第二个setTimeout中输出7 8 9

你可能感兴趣的:(javascript,前端,开发语言)