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":""
    }
]

虽然它正确显示图像[0]和图像[1]，但在单独打印时，对象阵列只显示两次图像[1] !!!

我做错了吗？

提前感谢您的时间。

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

Answer 1

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

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

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

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

    // ...
}

此问题与承诺/延迟无关，承诺/延迟实际上不会在您的代码中用于任何目的。你可以这样做：

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

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

Answer 2

在doAsyncOriginal中，您可以在退回承诺之前或甚至在添加完成处理程序之前解决延迟问题。

您应该延迟defer.resolve(i)调用，因此延迟将在稍后解决并输入完成处理程序...

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

    // ...

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

    return defer.promise();
}

jQuery延迟/承诺

2 个答案: