父函数的返回值（嵌套）；等待异步函数

Question

我对异步函数没什么问题。 getImageSizeByUrl() 中的异步函数可以使用 $.Deferred() 来处理。

function getImageSizeByUrl(url) {
    var deferredReady = $.Deferred();

    var tmpImg = new Image();
    tmpImg.src = url;
    // asynchronous function
    $(tmpImg).on('load',function(){
        getImageSizeByUrlWidth = tmpImg.width;
        getImageSizeByUrlHeight = tmpImg.height;

        deferredReady.resolve();
    });

    return deferredReady.promise();
}

但是现在我还有另外两个问题。在较低的函数中，函数 $.when 本身是异步的。所以它只解决了问题。这样chrome.webRequest.onBeforeRequest.addListener()函数就完成了，无需等待getImageSizeByUrl()的返回。在这种棘手的情况下，如何获得同步行为？

我的第二个问题是低层函数中的嵌套返回值。 return {redirectUrl: "https://www.google.de/images/srpr/logo11w.png"}; 和 return {} 应该是父函数 function(info) 的返回值。

(背景：chrome扩展的lower listener函数会在加载前检查每张图片。listener需要一个返回值来重定向或允许图片加载。但是listener函数不会等待upper函数getImageSizeByUrl的结果并返回一个空值。）

// listener for image loading
chrome.webRequest.onBeforeRequest.addListener(
    function(info) {
        console.log("test1");
        $.when(
            getImageSizeByUrl(info.url)
        ).done( 
            function() {
                // for example: if image has to big height or width, load alternative image
                if(getImageSizeByUrlHeight > 200 || getImageSizeByUrlWidth > 200) {
                    // load alternative image
                    console.log("test3");
                    return {redirectUrl: "https://www.google.de/images/srpr/logo11w.png"};
                } else {
                    // image is not big. allow loading
                    console.log("test3");
                    return {};
                }
            }
        );
        console.log("test3");
    },
    {
        urls: [
            "<all_urls>",
        ],
        types: ["image"]
    },
    ["blocking"]
);

希望有人能够帮助我/给我一些提示。 :)
最好的问候

Answer 1

您可能会发现编写一个返回“承诺的图像”的构造函数更有用，即带有返回承诺的自定义 .setSrc() 方法的 window.Image 实例。

这样的事情（未经测试）应该这样做：

function PromisifiedImg() {
    var img = new Image();
    img.setSrc = function(src, limits) {
        var dfrd = $.Deferred();
        img.onload = function() {
            if(limits && (img.width > limits.width || img.height > limits.height)) {
                var error = new Error('img dimension(s) exceed limits');
                error.number = 101; // 101 is arbitrary
                dfrd.reject(error);
            } else {
                dfrd.resolve(img);
            }
        };
        img.onerror = function(e) {
            e.number = e.number || 0;
            dfrd.reject(e);
        };
        img.src = src;
        return dfrd.promise();
    };
    return img;
}

现在您可以调用返回的 Image 的 .setSrc(...) 方法而不是 .src = '...'

您的 ....addListener() 处理程序可能看起来像这样：

chrome.webRequest.onBeforeRequest.addListener(
    function(info) {
        var img = new PromisifiedImg();
        img.setSrc(info.url, { width:200, height:200 }).then(null, function(e) {
            if(e.number === 101) { // detect the custom error condition
                console.log(e.message);
                return img.setSrc("https://www.google.de/images/srpr/logo11w.png");
            }
        });
    },
    { urls: [ "<all_urls>" ], types: ["image"] },
    ["blocking"]
);

这样做的一个好处是返回的图像是可重用的。对 .setSrc() 的第二次调用将在同一个 Image 实例上运行，但会返回一个新的 Promise。

注意：我没有尝试穿透chrome.webRequest.onBeforeRequest.addListener() 包装器传递给它的其他参数。随便看了一眼documentation，这看起来可能是错误的方法。因此，这个答案很可能只提供部分解决方案。