事件循环,promise面试题分析

• 进程(process):计算机已经运行的程序，是操作系统管理程序的一种方式；
• 线程(thread):操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中;
• 可以说进程是线程的容器;

javascript是单线程的,也应该有自己的容器:浏览器或者Node

javascript代码执行是在单个线程里执行的,所以同一时刻,javascript只能做一件事,如果某一件事比较耗时,那么就会阻塞我们后面代码的执行

但是浏览器的每一个tab就是一个进程,每一个进程又是多线程的,那么,其他的线程就可以帮助来完成耗时的操作,js线程只需要在特定的事件回调即可(事件循环:)

• 事件循环执行规则:
  • 事件循环维持着两个队列:宏任务队列,微任务队列,通过事件循环来调用队列里面的回调
  • 在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行
• 宏任务: setTimeout, setInterface, ajax, Dom事件
• 微任务: Promise, queueMicrotask等

题一:

//题1
setTimeout(function () {
  console.log('setTimeout1');
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log('then4');
    });
  });
  console.log('then2');
});

new Promise(function(resolve) {
    console.log('promise2');
    resolve()
}).then(function() {
    console.log('then1');
})

setTimeout(function() {
    console.log('setTimeout2');
})

console.log(2);

queueMicrotask(() => {
    console.log('queueMicrotask');
})

new Promise(function(resolve) {
    resolve()
}).then(function() {
    console.log('then3');
})
//题1答案:
// promise2
// 2
// then1
// queueMicrotask
// then3
// setTimeout1   
// then2
// then4
// setTimeout2

分析图:

题二:

//题二:
async function bar() {
  console.log(2222);
  return new Promise((resolve) => {
    resolve();
  });
}

async function foo() {
  console.log(1111);
  await bar();
  console.log(3333);
}

foo();

console.log(4444);

//题二答案:
//1111
//2222
//4444
//3333

分析图:

题三:

//题三:
async function async1() {
  console.log('async1 start');
  await async2()
  console.log('async1 end');
}

async function async2() {
  console.log('async2');
}

console.log('script start');

setTimeout(() => {
  console.log('setTimeout');
},0)

async1()

new Promise(function (resolve) {
  console.log('promise1');
  resolve()
}).then(function() {
  console.log('promise2');
})

console.log('script end');

//题三答案:
//script start
//async1 start
//async2
//promise1
//script end
//async1 end
//promise2
//setTimeout

分析图:

题四:(node环境下)

//题四:
async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2');
}

console.log('script start');

setTimeout(() => {
  console.log('setTimeout0');
}, 0);

setTimeout(() => {
  console.log('setTimeout2');
}, 300);

setImmediate(() => {
  console.log('setImmediate');
});

process.nextTick(() => {
  console.log('nextTick1');
})

async1()

process.nextTick(() => {
  console.log('nextTick2');
})

new Promise(function(resolve) {
  console.log('promise1');
  resolve()
  console.log('promise2');
}).then(function() {
  console.log('promise3');
})

console.log('script end');

//题四答案:
//script start
//async1 start
//async2      
//promise1    
//promise2    
//script end  
//nextTick1   
//nextTick2   
//async1 end  
//promise3    
//setTimeout0
//setImmediate
//setTimeout2

分析图:

好了完结散花……!