我有一系列异步调用，希望依次调用它们，这意味着在第一个诺言完成之前，我不希望调用第二个诺言。
在以下示例中，我得到了一个循环，该循环可动态创建唯一的图像并将其附加到页面上。我希望按顺序附加图像，但是由于某些原因，它们并不总是按照创建时的确切顺序进行渲染：
var container = document.getElementById("container");
var promise = Promise.resolve();
for(var i = 0; i<100; i++) {
(function(i) {
promise = promise.then(function() {
createPromise(container, i);
});
})(i);
}
function createPromise(container, i) {
return new Promise(function(resolve, reject) {
var img = new Image();
img.onload = function() {
container.appendChild(img);
resolve();
};
img.onerror = function() {
reject();
};
img.src = "http://placehold.it/100x100?text=Image+" + i + "&v=" + Date.now();
});
}img { float: left; margin: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.27/bluebird.min.js"></script>
<div id="container"></div>我还创建了一个说明问题的小提琴。
我使用的是bluebird，但我更愿意坚持使用本机ES6实施。
如果我是正确的，则此块导致了该问题：
promise = promise.then(function() {
createPromise(container, i);
});
createPromise返回一个Promise，但是在内部then您没有返回该Promise，因此它将假定return undefined;（所有js函数的默认值），因此，任何后续Promise都不会等待前任完成后再开始。尝试将其更改为：
promise = promise.then(function() {
return createPromise(container, i);
});
var container = document.getElementById("container");
var promise = Promise.resolve();
for(var i = 0; i<100; i++) {
(function(i) {
promise = promise.then(function() {
return createPromise(container, i);
});
})(i);
}
function createPromise(container, i) {
return new Promise(function(resolve, reject) {
var img = new Image();
img.onload = function() {
container.appendChild(img);
resolve();
};
img.onerror = function() {
reject();
};
img.src = "http://placehold.it/100x100?text=Image+" + i + "&v=" + Date.now();
});
}img { float: left; margin: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.27/bluebird.min.js"></script>
<div id="container"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句