求解一道promise笔试题

Question

setTimeout(function () {
  console.log(1);
}, 0);

Promise.resolve(function () {
  console.log(2);
})

new Promise(function (resolve) {
  console.log(3);
});

console.log(4);

输出：3 4 undefined 1

Answer 1

js中的事件执行主要分为两个任务类型 macro task以及micro task 也就是宏仁务和微任务

宏仁务：script（全局任务），setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering
微任务：process.nextTick，promise,Object.observer,MutationObserver

执行顺序为 script先进入函数调用栈，然后执行遇到任何其他宏仁务，比如遇到了setTimeout，就把setTimeout放进宏仁务队列中，遇到了微任务就放入微任务队列中，等到函数调用栈的所有内容出栈后 然后执行微任务队列，然后再回头执行宏仁务队列再进入函数调用栈再执行微任务队列，知道宏仁务队列执行完毕

在看上面的例子

//遇到setTimeout，放入宏仁务队列
setTimeout(function () {
  console.log(1);
}, 0);
//遇到promise，放入微任务队列
Promise.resolve(function () {
  console.log(2);
})
//这里虽然遇到了promise，但是是用new声明的，也就是立即执行，所以会先输出3
new Promise(function (resolve) {
  console.log(3);
});
//第二输出4
console.log(4);

//需要注意的是那个undefined并不是微任务输出的，而是console.log(4)输出的，具体可以控制台测试
----然后执行微任务，这个微任务并没有调用，所以也不会执行，然后执行宏仁务队列中的setTimeout，输出1

Answer 2

https://jakearchibald.com/201...

底层原因可以参考这篇文章

Answer 3

setTimeout(function(){console.log(1);},0) //异步队列
Promise.resolve(function(){console.log(2);})//写法错误 promise属于微服务队列 在主task之后立刻执行
new Promise(function(resolve){console.log(3);});//立即执行
console.log(4);//立即执行

Answer 4

Promise.resolve(function(){console.log(2);})里的console没执行。所以没有2. console.log(4)返回的undefined。setTimeout会把回调放到任务队列，等主程序有空了才回去执行。所以是 3 4 undefined 1

Answer 5

/*
* 宏任务
*   分类： setTimeout setInterval requrestAnimationFrame
*   1. 宏任务所处的队列就是宏任务队列
*   2. 第一个宏任务队列中只有一个任务： 执行主线程的js代码
*   3. 宏任务队列可以有多个
*   4. 当宏任务队列的中的任务全部执行完以后会查看是否有微任务队列如果有先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列
*
* 微任务
*   分类： new Promise().then(回调 里面的回调属于微任务) process.nextTick
*   1. 微任务所处的队列就是微任务队列
*   2. 只有一个微任务队列
*   3. 在上一个宏任务队列执行完毕后如果有微任务队列就会执行微任务队列中的所有任务**

*/
// 遇到 setTimeout 将 setTimeout 回调放入宏任务队列中
setTimeout(function () {
  console.log(1)
}, 0)
// 遇到了 promise，但是并没有 then 方法回调 
// 所以这句代码会在执行过程中进入我们当前的执行上下文 紧接着就出栈了
Promise.resolve(function () {
  console.log(2)
})
// 遇到了一个 new Promise，Promise 有一个原则就是在初始化 Promise 的时候Promise 内部的构造器函数会立即执行，
// 因此在这里会立即输出一个 3，所以这个 3 是第一个输出的
new Promise(function (resolve) {
  console.log(3)
})
// 然后第二个输出 4  当代码执行完毕后回去微任务队列查找有没有任务，
// 发现微任务队列是空的，那么就去宏仁务队列中查找，发现有一个我们刚刚放进去的setTimeout 回调函数，
// 那么就取出这个任务进行执行，所以紧接着输出1
console.log(4)

Answer 6

一二楼答案已经很明确了，我这里找到了一个异步的原理：

JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为 “阻塞式执行”。所以一次鼠标点击，或是计时器到达时间点，或是Ajax请求完成触发了回调函数，这些事件处理程序或回调函数都不会立即运行，而是立即排队，一旦线程有空闲就执行。假如当前 JavaScript线程正在执行一段很耗时的代码，此时发生了一次鼠标点击，那么事件处理程序就被阻塞，用户也无法立即看到反馈，事件处理程序会被放入任务队列，直到前面的代码结束以后才会开始执行。如果代码中设定了一个 setTimeout，那么浏览器便会在合适的时间，将代码插入任务队列，如果这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

所以代码会先执行 new Promise(function(resolve){console.log(3);});

然后执行 console.log(4);
这个返回的是undefined
最后执行 setTimeout(function(){console.log(1);},0)

Answer 7

先说答案：3 4 1。不知道题主的undefined是怎么得出来的，我运行了一下，根本不会执行，而且也没这种写法。

解析：Promise函数体内的方法会立即执行，所以先输出3。然后顺序执行，主线程中的4。最后输出1，是因为setTimeout，将回调函数放入了异步队列中。js的事件循环机制会先执行主线程中的代码，然后才会去读取异步队列里的任务。

如果想更深入的了解js的事件循环机制，可以参考这篇文章。

Answer 8

去掉干扰就是这样的。

setTimeout(function () {
  console.log(1);
}, 0);
function () {
  console.log(2);
}
console.log(3);
console.log(4);