jQuery 延迟/承诺

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]，但是分开打印时，object数组只显示两次images[1]！！！

我是不是做错了什么？？？

提前感谢您的宝贵时间。

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

Answer 1

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

你需要在你的函数中创建对象：

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

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

    // ...
}

这个问题与 promises/deferreds 无关，promises/deferreds 在您的代码中确实没有任何用途。你可以这样做：

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

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

Answer 2

在doAsyncOriginal 中，您在返回它的承诺之前或什至在添加完成处理程序之前解决您的延迟。

你应该延迟defer.resolve(i)调用，所以延迟的会在稍后解决并进入done handler...

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

    // ...

    // Function.bind equivalent to jQuery.proxy
    window.setTimeOut(defer.resolve.bind(defer, i), 0);

    return defer.promise();
}