javascript - jQuery 延迟/ promise

Question

我试图在循环中使用 deferred/promise，但我得到了奇怪的行为。我的代码如下:

var images = [];
var numImages = Blobs.length;
var image = {};
console.log("numImages: " + numImages);

function doAsyncOriginal(i) {
    var defer = $.Deferred();

    image.original = Blobs[i].key;
    image.resized = '';
    image.thumbnail = '';
    images.push(image);

    console.log("i: " + i + "  image: " + image.original);
    console.log("images[" + i + "]: " + images[i].original);

    defer.resolve(i);

    return defer.promise();
}

$(function(){
    var currentImage = doAsyncOriginal(0);

    for(var i = 1; i < numImages; i++){
        currentImage = currentImage.pipe(function(j) {
            return doAsyncOriginal(j+1);
        });
    }

    $.when(currentImage).done(function() {
        console.log(JSON.stringify(images));
    });

});

代码中使用的 Blob 是我从远程 Web 服务获取的对象数组，其中包含有关图像的属性(准确地说，它来自 filepicker.io 的 pickandstore 方法)。

当我运行它时，我在控制台中看到以下内容:

numImages: 2
i: 0  image: pictures_originals/3QnQVZd0RryCr8H2Q0Iq_picture1.jpg
images[0]: pictures_originals/3QnQVZd0RryCr8H2Q0Iq_picture1.jpg
i: 1  image: pictures_originals/MD3KO6GjT8SNFYoPcG8J_picture2.jpg
images[1]: pictures_originals/MD3KO6GjT8SNFYoPcG8J_picture2.jpg

[
    {
        "original":"pictures_originals/MD3KO6GjT8SNFYoPcG8J_picture2.jpg",
        "resized":"",
        "thumbnail":""
    },
    {
        "original":"pictures_originals/MD3KO6GjT8SNFYoPcG8J_picture2.jpg",
        "resized":"",
        "thumbnail":""
    }
]

虽然正确显示了images[0]和images[1]，但单独打印时，对象数组只显示了两次images[1]!!!

我做错了什么吗？？？

预先感谢您的宝贵时间。

更新:我根据@TrueBlueAussie的评论更正了代码

Answer 1

您在每次调用 doAsyncOriginal() 时重复使用相同的 image 对象，因此 images 数组的每个元素都指向相同的对象。

您需要在函数内创建对象:

var image = {};  // <-- delete this

function doAsyncOriginal(i) {
    var image = {};

    // ...
}

这个问题与 promise /延迟无关，并且 promise /延迟在您的代码中确实没有任何作用。你可以这样做:

$(function(){
    var images = Blobs.map(function (blob) {
        return { 
            original: blob.key,
            resized: '',
            thumbnail: ''
        };
    });

    console.log(JSON.stringify(images));
});