素材牛VIP会员
求解一道promise笔试题
 雨***3  分类:Node.js  人气:815  回帖:7  发布于6年前 收藏
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

 标签:node.jsjavascript

讨论这个帖子(7)垃圾回帖将一律封号处理……

Lv4 码徒
铁***1 JS工程师 6年前#1

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

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

Lv1 新人
真***溜 职业无 6年前#2

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

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

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

Lv6 码匠
13***62 产品经理 6年前#3

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
Lv6 码匠
邹***b CEO 6年前#4
setTimeout(function(){console.log(1);},0) //异步队列
Promise.resolve(function(){console.log(2);})//写法错误 promise属于微服务队列 在主task之后立刻执行
new Promise(function(resolve){console.log(3);});//立即执行
console.log(4);//立即执行
Lv5 码农
陌***3 PHP开发工程师 6年前#5

去掉干扰就是这样的。

setTimeout(function () {
  console.log(1);
}, 0);
function () {
  console.log(2);
}
console.log(3);
console.log(4);
Lv3 码奴
凤***奇 职业无 6年前#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)

Lv3 码奴
sc***31 Linux系统工程师 6年前#7

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取