2

我有一个异步调用数组，我想按顺序调用它们，这意味着我不想在第一个 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 实现。

4

1 回答 1

3

如果我是正确的，这个块会导致问题：

    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>

于 2015-06-05T06:38:39.780 回答