JavaScript承诺then()排序

我还在学习JavaScript Promises,我遇到了一个我不理解的行为.

var o = $("#output");
var w = function(s) {
    o.append(s + "<br />");
}

var p = Promise.resolve().then(function() {
    w(0);
}).then(function() {
    w(1);
});

p.then(function() {
    w(2);
    return new Promise(function(r) {
        w(3);
        r();
    }).then(function() {
        w(4);
    });
}).then(function() {
    w(5);
});

p.then(function() {
    w(6);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

我希望这些语句按顺序运行 – 也就是说,输出就是

0
1
2
3
4
5
6

相反,输出是

0
1
2
3
6
4
5

即使删除了内在的承诺,在我看来,也会产生矛盾的结果.在2之前输出1,但在5之前输出6.

谁可以给我解释一下这个？

我注意到的一点是,每次重新分配p都会给我们预期的顺序.

解决方法:

你早期看到6的原因是因为你没有链,你分支.

当你调用p.then().then().then()时,你有一系列必须以正确的顺序执行的promise.
但是,如果你调用p.then().then(); p.then(),你有2个承诺附加到p – 基本上创建一个分支,第二个分支将与第一个分支一起执行.

您可以通过确保将它们链接在一起来解决这个问题p = p.then().then(); p.then();

仅供参考,您几乎不想分支,除非您将它们重新组合在一起(例如Promise.all),或者故意创建一个“即发即忘”分支.