javascript - 使用延迟的resolve()和when()时传递参数

Question

我正在开发一个闪存卡网页，我想知道预加载的图像何时加载或遇到错误。一旦我掌握了每张图片的状态，我就会采取一些行动。

我的代码基于 stackoverflow 帖子 Wait for image to be loaded before going on

function loadSprite(src) {
    var deferred = $.Deferred();
    var sprite = new Image();
    sprite.onload = function() {
        deferred.resolve();
    };
    sprite.src = src;
    return deferred.promise();
}

以及加载 Sprite 的函数

var loaders = [];
loaders.push(loadSprite('1.png'));
loaders.push(loadSprite('2.png'));
loaders.push(loadSprite('3.png'));
$.when.apply(null, loaders).done(function() {
// callback when everything was loaded
});

我修改了 loadSprite 解析以返回状态结果:

deferred.resolve("STATUS RESULT");

以及何时

$.when.apply(null, loaders).done(function("STATUS RESULT") {
  // callback when everything was loaded
  //Do something with "STATUS RESULT"
});

问题是我无法为 loaders.push(loadSprite(file to load)); 的每次调用分离出“状态结果”； 也就是说我只得到一个变量而不是一个每次调用 loadSprite

我没想到我的上面的代码可以工作，它更多的是向自己证明我可以传递一些东西回来。

我无法解决这个问题，感谢所有帮助。谢谢，

Answer 1

实际上，它按预期工作。您可以稍微调整您的创建者方法，例如

function loadSprite( src ) {
    return $.Deferred(function( promise ) {
        var sprite = new Image();

        sprite.onload = promise.resolve.bind( null, "status result" );
        sprite.src = src;
    }).promise();
}

现在，当您将一些promise 对象推送到数组中并应用 .when()关于这一点

loaders.push(loadSprite('1.png'));
loaders.push(loadSprite('2.png'));
loaders.push(loadSprite('3.png'));

每个status result ，将列在 .done() 的 arguments 对象中处理程序。所以

$.when.apply(null, loaders).done(function() {
    console.log( arguments[ 0 ] ); // status result
    console.log( arguments[ 1 ] ); // status result
    // etc
});

另外，请记住 .done handler的.when() ，仅在所有 promise 对象成功解决时触发。

这反过来意味着，如果您的一张图像由于某种原因无法加载，它的 promise 将永远不会达到 resolved说明，因此，您的 .when()处理程序永远不会触发。