Установки логического возвращаемого значения вызова функции JQuery

Question

У меня есть функция здесь, которая проверяет, если изображение имеет размеры 100 на 100 пикселей, и если это так возвращает истину

function checkDims(url) { 
    var valid = $("<img/>").attr("src", url).load(function() { 
     s = { w: this.width, h: this.height }; 
     if (s.w == 100 && s.h == 100) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    }); 
    return valid; 
} 

Я хочу, чтобы установить переменный действительный, который проверяет с помощью .load function to get the image size of a remote URL, и я хочу, чтобы он вернул true или false соответственно. Я знаю, что настраиваю его на объект jQuery, но хочу получить результаты от внутренней функции.

Я попытался сделать:

function checkDims(url) { 
    var valid; 
    $("<img/>").attr("src", url).load(function() { 
     s = { w: this.width, h: this.height }; 
     if (s.w == 100 && s.h == 100) { 
      valid = true; 
     } 
     else { 
      valid = false; 
     } 
    }); 
    return valid; 
} 

Но он дал мне неопределенными в качестве значения действительны, когда я назвал checkDims функционировать

так, если бы я назвал

Var S = checkDims (a_url)

. Он вернется

неопределенные

Answer 1

Вам нужно разбить логику в два этапа, так как это асинхронный вызов.

function checkDims(url, callback) { 
    $("<img/>").attr("src", url).load(function() { 
     callback (this.width == 100 && this.height == 100); 
    }).on("error") { callback(false); }); 
} 

function nextStep(isValid) { 
    alert("The image is " + ((isValid) ? "" : "not ") + "valid" 
} 

checkDims("foo.gif", nextStep);