JS Asynchronous calls - my callback method is not working to check an image dimensions

Question

I have a boolean function here called checkURL that checks if a picture has 100 x 100 pixels. If so it returns true. There is an asynchronous call within the function to check the size of the image.

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

I am getting the error:

callback is not defined

within the checkURL function. I am also worrying that the variable valid within checkURL will end up being invalid.

ADDITIONAL EDIT: If I add console.log(valid); before returning valid I get undefined. Is this expected?

All the code that relies on the response needs to be in (or at least originated from) the callback. That's why there's a callback in the first place. — Lye Fish, Jun 10 '15 at 15:15
Your error message doesn't make sense. What browser are you using? I'd expect it to say something like *"callback is not a function"* — , Jun 10 '15 at 15:20

score 1 · Accepted Answer · answered Jun 10 '15 at 15:16

1

You define callback here:

function checkURL(url, callback) {

Then you redefine it here:

img.onload = function(callback){

… which masks the variable you actually give a value to.

Don't mask it:

img.onload = function(){

answered Jun 10 '15 at 15:16

Quentin

914,110
126
1,211
1,335

Thankyou. Is it expected to get 'undefined' for valid before returning it in checkURL? – Jebathon Jun 10 '15 at 15:20
Yes. http://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function – Quentin Jun 10 '15 at 15:28

score 0 · Answer 2 · answered Jun 10 '15 at 15:14

0

Just change this line:

 img.onload = function(callback){

to this:

 img.onload = function(){

Because you are creating a new var callback in the new scope, and you don't need it there.

answered Jun 10 '15 at 15:14

Pablo Matias Gomez

6,614
7
38
72

JS Asynchronous calls - my callback method is not working to check an image dimensions

2 Answers2