Setting a boolean return value to a jQuery function call

Question

I have a function here that checks if a picture has the dimensions of 100 by 100 pixels and if so returns true

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;
}

I want to set a variable called valid that checks by using a .load function to get the image size of a remote URL and I want it to return true or false accordingly. I know I'm setting it to a jQuery object but I want to get the results from the inner function.

I tried doing:

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;
}

But it gave me undefined as a value for valid when I called the checkDims function

so if I called

var s = checkDims(a_url)

. It would return

undefined

load is an asynchronous call, you can not return from an asynchronous call. By the time the true or false is set, the function has already exited. — epascarello, Jun 09 '15 at 16:15
How would I workaround this. If possible? Do I need a setInterval function to wait? — Jebathon, Jun 09 '15 at 16:16
You need to change your logic so that the callback fires off the next step of your process. — epascarello, Jun 09 '15 at 16:17
@epascarello Then why if I put a console.log within the call it will print? — Jebathon, Jun 09 '15 at 16:22
Put it In what call? The load method? Because it that gets fired after the return. — epascarello, Jun 09 '15 at 16:23
That is why if you looked at the console it would say "undefined" and than on the next line "here". Reason it is `undefined` is when you declared `valid` you never set a value. This is the same concept as making an Ajax call. — epascarello, Jun 09 '15 at 16:26

score 1 · Answer 1 · answered Jun 09 '15 at 16:21

1

You need to break up your logic into two steps since this is an asynchronous call.

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);

answered Jun 09 '15 at 16:21

epascarello

204,599
20
195
236

So the nextStep function should return true or false? if I want to set var result = checkDims("foo.gif",nextStep)? – Jebathon Jun 09 '15 at 16:31
You can not return from this! It is impossible to return from an asynchronous call. You need to break your logic up so what ever you were doing after the call to checkDims needs to be in the function nextStep. – epascarello Jun 09 '15 at 17:15
So there is no way to set checkDims to the result of nextStep callback? – Jebathon Jun 09 '15 at 18:16

Setting a boolean return value to a jQuery function call

1 Answers1