Method ends before $.getJson finishes running

Question

I have the follow code using jQUery's getjson methods

function Share(){
var title = 'Hello';
var description = 'hi description';
var url = "www.facebook.com"

$.getJSON("http://getTitle/1", function(data){
        title = data.Name;
});
callShare(title,description,url,imageUrl);
}


function callShare(title,description,url,imageUrl){
window.open(
        'http://www.facebook.com/sharer.php?s=100&p[title]='+title+'&p[summary]='+description+' &p[url]='+url+'&p[images][0]='+imageUrl+'','facebook-share-dialog',
        'width=626,height=436')}

However, it seems that the method finishes running and does the callShare function before the getJson method has finished running. Would require some help here. I understand that there might be duplicate question here and I apologize but I am not able to apply it here.

Thanks

ajax is asynchronous so you need to use the callback if you want the code to run when the call finishes — omma2289, Sep 20 '13 at 05:22
Duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call). Please show us how you tried to apply those solutions. — Bergi, Sep 20 '13 at 08:03

score 3 · Accepted Answer · edited Sep 20 '13 at 05:45

3

$.getJSON("http://getTitle/1", function(data){
        title = data.Name;
        callShare(title,description,url,imageUrl);
});

Being an async function $.getJson() doesn't wait for the response and executes the next line.
If you want to do some things after the response has been received from the server put it in the success function. Like I have mentioned in the code.

if you also want to execute code on error or before sending the request. Use $.ajax() instead

edited Sep 20 '13 at 05:45

zzlalani

22,960
16
44
73

answered Sep 20 '13 at 05:21

Parv Sharma

12,581
4
48
80

this does make sense, but what if i have to make multiple getJson calls – Lionel Koh Sep 20 '13 at 05:27
2

@LionelKoh Then you wrap the calls to `$.getJSON` inside [`$.when`](http://api.jquery.com/jQuery.when/), which executes a callback once *all* of the requests complete – quietmint Sep 20 '13 at 05:30

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

Althoug the question has been answered by Parv but here are some explanation

First of all the correct way to call functions in such senarios

$.getJSON("http://getTitle/1", function(data){
     title = data.Name;
     callShare(title,description,url,imageUrl);
});

Now the question is why?

$.getJSON is an extension of $.ajax method i.e. Asynchronous, so the browsers expect of waiting for the request to complete by $.getJSON they move on to the next line of codes so that the user dont get stuck with lock browser waiting for a request to complete.

Now what is the solution in that case?

Such Asynchronous requests have a or couple of special methods called call backs, so all you need is to call such methods in those call backs that are required to be called after the successful failed or complete of the request, you will find more in the above link

score 0 · Answer 3 · answered Sep 20 '13 at 06:05

$.getJSON is just a shorthand for $.ajax. As others pointed out, its an async call which will run in a separate thread(kind of) and rest of the code will keep on executing without worrying for the JSON result.

So you can add a success function which will be called when the async call succeeds. You can use $.ajax too.

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: callShare(title,description,url,imageUrl),
  error: alert('error');
});

I use $.ajax because it gives more clarity over the things that are happening.

Method ends before $.getJson finishes running

3 Answers3