为什么Javascript EventLoop有不同的结果？

Question

最近，我读了一篇关于Javascript EventLoop的文章。但是，当我将代码放入Visual代码中执行时，会有一些不同的结果。我很困惑。谢谢你帮忙！

以下是代码：

console.log('1');

// written as set1
setTimeout(function () {
    console.log('2');
    // written as set4
    setTimeout(function() {
        console.log('3');
    });
    // written as pro2
    new Promise(function (resolve) {
        console.log('4');
        resolve();
    }).then(function () {
        console.log('5')
    })
})

// written as pro1
new Promise(function (resolve) {
    console.log('6');
    resolve();
}).then(function () {
    console.log('7');
    // written as set3
    setTimeout(function() {
        console.log('8');
    });
})

// written as set2
setTimeout(function () {
    console.log('9');
    // written as pro3
    new Promise(function (resolve) {
        console.log('10');
        resolve();
    }).then(function () {
        console.log('11');
    })
})

其结果可以是以下之一：

1,6,7,2,4,9,10,8,5,11,3

1,6,7,2,4,9,10,5,11,8,3

Answer 1

你好，妮塔，欢迎来到堆栈溢出。

浏览器中日志外观的顺序是根据HTML5标准中的一个要求确定的，即在对计时器队列中的过期计时器执行任何回调之前，要执行已解决(已完成)承诺的回调。

ECMAScript规范本身不试图定义承诺作业的执行优先级，这些作业在承诺解决后执行对然后的处理程序的调用，涉及主机环境中的其他异步事件。

Promise.then Job execution order的答案将更详细，并提供相关标准的链接。

因此，对于符合HTML5的浏览器，日志的顺序将是

 1, 6, 7, 2, 4, 5, 9, 10, 11, 8, 3

因为执行在履行承诺的基础上设置的处理程序回调，所以优先于计时器回调。

HTML5标准没有规定定时器的相对优先级，并承诺在非浏览器环境(如Node.js )中进行回调。

因此，输入控制台的日志顺序之间的差异可以归因于主机环境中的差异。

带回家的想法是设置代码，以依赖计时器之间的竞争条件的结果，并且承诺回调是一项有点脆弱的工作--它依赖于主机环境的实现。