JS 异步调用 - 我的回调方法无法检查图像尺寸

Question

我这里有一个布尔函数，叫做 checkURL，它检查图片是否有 100 x 100 像素。如果是，则返回 true。函数内部有一个异步调用来检查图像的大小。

function checkURL(url, callback) {

    var valid;
    var img = new Image();
    img.src = url;

    img.onload = function (callback) {

        valid = callback(img.width, img.height);

    };
    console.log(valid);
    return valid;
}


function nextStep(w, h) {
    if (w == 100 && h == 100) {
        return true;
    } else {
        return false;
    }
}

var pic_valid = checkURL(a_url, nextStep);

我收到错误：

回调未定义

在 checkURL 函数中。我还担心 checkURL 中的变量 valid 最终会无效。

附加编辑：如果我添加 console.log(valid);在返回有效之前我得到未定义。这是预期的吗？

Answer 1

只需更改此行：

 img.onload = function(callback){

到这里：

 img.onload = function(){

因为您正在新范围内创建一个新的 var callback，而您不需要它。

Answer 2

你在这里定义回调：

function checkURL(url, callback) {

那你在这里重新定义：

img.onload = function(callback){

...它掩盖了您实际为其赋值的变量。

不要掩饰它：

img.onload = function(){