我有一个异步调用数组,我想按顺序调用它们,这意味着我不想在第一个 promise 完成之前调用第二个 promise,依此类推。
在下面的示例中,我有一个循环,它可以动态创建独特的图像并将它们附加到页面上。我希望按顺序附加图像,但由于某种原因,它们并不总是按照创建它们的确切顺序呈现:
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>
我还创建了一个Fiddle来说明这个问题。
我正在使用 bluebird,但我更愿意坚持使用原生 ES6 实现。