why this JavaScript method return undefined?

Question

in this code this method return undefined despites alert statement print a value ?

function getNearestPoint(idd) 
        {
            var xmlhttp;
            var result;
            if(window.XMLHttpRequest)
                xmlhttp=new XMLHttpRequest();
            else
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");     
            xmlhttp.onreadystatechange=function()
            {
             if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        result= xmlhttp.responseText;
                        alert(result);

                    }

            }
            xmlhttp.open("GET","ajax_get_nearest_location.php?id="+idd +"&radius=1",true);
            xmlhttp.send();
            return result;
        }

Because your function returns before a result is returned from the AJAX request. The request is Asynchronous. — Russ Cam
– Russ Cam, Commented Apr 13, 2011 at 22:38
I'm afraid people will never stop asking this kind of questions.... :-/ We have to start some campaign. — Felix Kling
– Felix Kling, Commented Apr 13, 2011 at 22:54
@Felix we need a reference question that we all can link to (or close as a duplicate of) :) — Pekka
– Pekka, Commented Apr 13, 2011 at 23:22

user578895 · Accepted Answer · 2011-04-13 22:38:15Z

2

result isn't defined at that point, it only gets defined once your callback executes. The order of execution:

getNearestPoint starts
XHR is fired off
getNearestPoint returns undefiend
XHR comes back and runs xmlhttp.onreadystatechange
result gets set

If you need result from OUTSIDE of this, you should use a callback:

getNearestPoint(idd, cb){
   ...
   xmlhttp.onreadystatechange = function(){
      ...
      cb(result);
   }
}

and your calling code changes from:

var result = getNearestPoint(id);

to:

getNearestPoint(id, function(result){
   // do something with result;
});

answered Apr 13, 2011 at 22:38

user578895

Sign up to request clarification or add additional context in comments.

2 Comments

Adham Over a year ago

i want to call it like this way ? var url="getShortestPath.php?from="+getNearestPoint(id1)+"&to="+getNearestPoint(id2); how can i do that ?

Felix Kling Over a year ago

@adham: That is not possible with asynchronous calls.

Pekka · Accepted Answer · 2011-04-13 23:22:18Z

1

This is because of the asychronous nature of Ajax ("Asynchronous JavaScript and XML"): The request will still be running when your code hits return result. The readystatechange callback will not have been called yet, and the result variable not set yet.

The usual way to deal with this is to change the architecture of the script: Do whatever you need to do based on result directly in the onreadystatechange callback. (or, of course, pass a callback function with the desired actions and execute it in the handler.)

edited Apr 13, 2011 at 23:22

answered Apr 13, 2011 at 22:37

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

1 Comment

user578895 Over a year ago

The only downside to running code directly in onreadystatechange is that it kills re-usability of the code. Better, in general, to use a callback

Robert Koritnik · Accepted Answer · 2011-04-13 22:38:16Z

0

`result` setting statement executes inside async Ajax function

Because your second if statement (that sets result value) doesn't get hit. Why not? Because the moment you send an Ajax request you return the result value which is still undefined. Ajax call will execute the anonymous function later on and set this result variable which has been returned long ago.

Ajax is asynchronous and your code isn't taking this into account.

answered Apr 13, 2011 at 22:38

Robert Koritnik

105k57 gold badges286 silver badges415 bronze badges

Collectives™ on Stack Overflow

why this JavaScript method return undefined?

3 Answers 3

2 Comments

1 Comment

`result` setting statement executes inside async Ajax function

Ajax is asynchronous and your code isn't taking this into account.

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

result setting statement executes inside async Ajax function

Ajax is asynchronous and your code isn't taking this into account.

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`result` setting statement executes inside async Ajax function