javascript - 关于img.onload的问题

Question

先看看我的代码

getMainColor: function(imgUrl){
        var mainColor = '191,0,0';
        var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "html:canvas");
        var canvas = canvas.getContext('2d');
        var logoImg = new Image();
        logoImg.onload = function() {
            logoImg.onload = null;
            try {
                var notColorList = new Array('0,0,0', '255,255,255');
                canvas.width = logoImg.width;
                canvas.height = logoImg.height;
                canvas.drawImage(logoImg, 0, 0, logoImg.width, logoImg.height);
                var imageData = canvas.getImageData(parseInt(logoImg.width / 3), parseInt(logoImg.height / 2), 1, 1).data;
                var imageDataRgba = imageData[0] + ',' + imageData[1] + ',' + imageData[2];
                if (notColorList.indexOf(imageDataRgba) > -1 || Luger.isWhite(imageData[0], imageData[1], imageData[2])) {
                    imageData = canvas.getImageData(parseInt(logoImg.width / 2), parseInt(logoImg.height / 2), 1, 1).data;
                    imageDataRgba = imageData[0] + ',' + imageData[1] + ',' + imageData[2]
                }
                if (notColorList.indexOf(imageDataRgba) == -1 && !Luger.isWhite(imageData[0], imageData[1], imageData[2])) {
                    mainColor = imageDataRgba
                }
                return mainColor;
            } catch (err) {}  // css('borderBottomColor', 'rgba(' + mainColor + ',.6)')
        };
        logoImg.src = imgUrl;
    },

我这是想返回mainColor 但是这么返回什么也得不到，如果放到onload外面，里面的还没执行就返回了，返回的是默认值，我想等onload执行完获取值后再返回请问怎么做。谢谢

Answer 1

没完全看懂你的意思。

如果你是想要在让getMainColor返回mainColor的结果的话，死了这条心吧。JavaScript里的onload只能是异步的，当加载完成后调用你的onload回调函数。JavaScript是实现不了真正的blocking wait的。

也就是说，按照比较JavaScript的写法，你的getMainColor应该也写成异步的而非同步的，接受一个回调函数，然后当取到图片并且计算出mainColor之后getMainColor会去call那个回调函数。

你可以参见 http://stackoverflow.com/questions/5010288/how-to-make-a-function-wait-until-a-callback-has-been-called-using-node-js