Why is my function not returning true?

Question

I've got this function that tests if a script is loaded:

function urlExists(url){
    $.ajax({
      url: url,
      success: function(data){
        //alert(url + ' exists');
        console.log(url + ' exists');
        return true
      }, 
      error: function(data){
        //alert(url + ' failed to load');
        console.log(url + ' failed to load');
        return false
      }
    });
}

And then I call it in this fashion:

if (urlExists('file.js')) {
    var rm = true;
}

But even if I get the console.log that the url exists, my var rm is still undefined.

I tried using Arun P Johny's solution like so:

urlExists('file.js', function(result){ 
    if(result){
        rm = true;
    }
});

But rm is still undefined even if file.js exists and I get the console log that says so.

Arun P Johny · Accepted Answer · 2013-05-15T15:50:23.963

Update: As @phant0m pointed out, you are not returning any value from urlExists, both the return statements are part of the callback methods passed to the ajax call. So your urlExists() always returns undefined causing the if condition to fail.

Because urlExists uses an ajax call which is asynchronous in nature means once the request is sent to the server urlExists method exists returning undefined causing your if condition to fail.

In such cases the solution is to use a callback method which will get executed with the result once the asynchronous task is completed.

In this case we can alter urlExists to accept a callback function as given below and call the callback with either true or false depending upon the result of the ajax call.

function urlExists(url, callback){
    $.ajax({
      url: url,
      success: function(data){
        //alert(url + ' exists');
        console.log(url + ' exists');
        callback(true)
      }, 
      error: function(data){
        //alert(url + ' failed to load');
        console.log(url + ' failed to load');
        callback(false)
      }
    });
}

Then

urlExists('file.js', function(result){
    if(result){
    }
})

Whether or not ajax is asynchronous is irrelevant. Even if it were synchronous, it wouldn't work, because the `return` statements are in no way connected to the urlExists function. Otherwise, nice post. — phant0m, May 15 '13 at 15:47
@phant0m sorry missed that point, the update should fix the problem — Arun P Johny, May 15 '13 at 15:48

score 1 · Answer 2 · edited May 23 '17 at 12:05

The urlExists function doesn't have a return statement at all (so it will always return undefined).

The functions that do are event handlers assigned to the ajax handler. They won't even fire until after the HTTP response is received, which will be after the urlExists function has finished running and returned whatever it is going to return.

If you want to do something in reaction to the ajax response being processed, then you have to do it in the event handlers. You can't return to the caller because the it will have finished and gone away.

An extended explanation of this can be found in answers to this question. Your example doesn't care about returning the actual data, but the principles are the same.

+1 for `The urlExists function doesn't have a return statement at all.` The obvious and important bit which all others missed. — phant0m, May 15 '13 at 15:48

score 0 · Answer 3 · answered May 15 '13 at 15:43

0

the success and error functions are callback methods. They are not part of the function urlExists. Rather they are part of the parameters passed to $.ajax.

answered May 15 '13 at 15:43

Mohayemin

3,841
4
25
54

score 0 · Answer 4 · answered May 15 '13 at 15:45

Your call is performing asynchronously. The first function creates ajax call and adds success and error handlers, and then immediately finishes. Since there is no return statement in the first function, it returns undefined. Success callback executes after the line var rm = true; is executed. You should use a callback to get result from your function.

Why is my function not returning true?

4 Answers4