javascript - JS 等待函数中的几个事件完成

Question

我有一个上传图像并将其显示在页面上的功能。我应该如何等待函数完成？

$("#images").change(function(){
        updateArray(this);
        addImages();
    });

function updateArray(inp)
    {
        for(var i=0,file; file = inp.files[i]; i++)
        {
            var reader = new FileReader();
            reader.onload = function (evt)
            {
                images[images.length] = evt.target.result;
            }
            reader.readAsDataURL(file);
        }
    }

我想在 updateArray() 中的所有事件完成后调用 addImages()

Answer 1

我会使用 jQuery 的 deferred/promises这里。这将允许您等到每个 onload 完成，然后触发回调。

这是一个例子:

function updateArray(inp)
{
    var promises = [];
    for(var i=0,file; file = inp.files[i]; i++)
    {
        var reader = new FileReader(),
            d = new $.Deferred();

        promises.push(d);
        // Make sure we "capture" the correct 'd'
        (function(d){
            reader.onload = function (evt)
            {
                images.push(evt.target.result);
                d.resolve();
            }
        }(d));
        reader.readAsDataURL(file);
    }

    return $.when.apply($, promises);
}

这将为每个FileReader创建一个新的延迟对象。当每一项完成后，其各自的延迟将得到解决。 $.when 用于将所有延迟合并为一个。因此，在您的 .change() 中，您可以简单地执行以下操作:

$("#images").change(function(){
    updateArray(this).done(function(){
        addImages();
    });
});

附注您还可以将参数传递给 resolve() 以在 .done() 回调中使用。因此，您可以执行 d.resolve(evt.target.result);，而不是附加到 images 数组。

(function(d){
    reader.onload = function (evt)
    {
        d.resolve(evt.target.result);
    }
}(d));

然后在.done()中，您可以执行以下操作:

$("#images").change(function(){
    updateArray(this).done(function(){
        // Each '.resolve' added a new parameter to here, let's get them all
        images = [].slice.call(arguments, 0);
        addImages();
    });
});