zwrócenie wartości z metody onload

hej

chcialem wczytać obrazek i na podstawie jego rozmiaru zwrócić później alert i nie wiem jak tego dokonać. Mianowicie:

 
        var reader = new FileReader();
        var image  = new Image();
        reader.readAsDataURL(input.files[0]);
        reader.onload = function (e) {
        	image.src    = e.target.result; 
        	var valid = false;
        	valid = image.onload = function() {
                if (thi.width > 200) {
                	valid = true;
                }
                return valid;
            }();
        
        }
        **miejsce w którym chciałem otrzymać wartość** //valid//

kompletnie nie wiem jak dotrzeć do tej wartości...
Chciałbym otrymać ta wartoś valid poza blokiem "reader.onload = function (e)"

nie da się, tak działa asynchroniczność. żeby nie pakować wszystkiego w onload po prostu wywołaj tam sobie funkcję jakąś - i niech ona kontynuuje jakieś tam działania.

Zerknij na Promise API. A w przyszłości jeszcze dojdzie async/await i się pozbędziemy z JavaScriptu tego callback hellu.

to jak w takim razie wyciągnąć valid z poniższego kodu?

 function validateImage(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    var image  = new Image();
    reader.readAsDataURL(input.files[0]);
    reader.onload = function (e) {
        image.src    = e.target.result; 
        var valid = false;
        valid = image.onload = function() {
            if (thi.width > 200) {
                valid = true;
            }
            return valid;
        }();
        return valid;
    }
}
here i would like to return "valid"
return valid
}

No tak jakby to się nie da - zawsze przy asynchroniczności musi być callback. Promise jest tu dobrym rozwiązaniem, wręcz podręcznikowy przykład nauki korzystania z tego, ale to wciąż nie będzie liniowo, że var wynik = costam().

napisałem coś takiego:

 
<input type="file" class="form-control picture" id="image"


$("#image").on("change", function(){
    $.when(validateImage(this)).done(function(err) {
        execute code;
    }).fail(function(err) {
        alert('fail');
    });;
    });

function validateImage(input) {
    var defer = $.Deferred();
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        var image  = new Image();
        reader.readAsDataURL(input.files[0]);
        reader.onload = function (e) {
        image.src    = e.target.result; 
        image.onload = function() {
            if (image.width > 200) {
                defer.reject();
            }
        };
    }
}
return defer.promise();
}

ale ma to jedną wadę. Mianowicie kiedy dokonuje zadnej akcji na Deferred to miejsce execute code; w ogóle sie nie wykonuje co jest logiczne w sumie. Chciałem zobić cos na zasadzie

function validate(){

  var prom = check image parameters and return Promise if error; 

if (prom has error) {
    exit function;
} else {
    execute function 
)};