0

I have the following logic within a function that needs to return a value based on the data returned back from an ajax call, however, I need the processing to happen after the success function.

var result;
console.log("First");
$.ajax ({
    dataType: "jsonp",
    url: url,
    async: false,
    success: function(data) {
        result = data;
        console.log("Result: " + result);
        console.log("Second");
    },
    error: function(err) {
        console.log(JSON.stringify(err))
    }
});
console.log("Third");

console.log("Data: " + result);

I expect to see the following in the console

First Result: [object Object] Second Third Data: [object Object]

However, I see the following in the console First Third Data: undefined Result: [object Object] Second

It would seem like it's actually performing asynchronously or rather asynchronously right when it needs to call the success function.

I have tried making this not asynchronous by adding async: false. Is there a way to have the follow code after the ajax call execute AFTER the success function has executed. I want to return a boolean depending on the data return to the function that is housing this ajax call.

Looking at the forums I can find similar situations but they don't ask my specific question about executing the code after the ajax call AND the success function.

harmonickey
  • 1,299
  • 2
  • 21
  • 35
  • The don't answer your question because you can't do that with asynchronous functions. That's what asynchronous means. Everything that depends on the result must be done IN the callback function, not after it. – Barmar May 08 '14 at 22:38
  • @Barmar I think `async:false` blocks i/o until the request finishes. – jraede May 08 '14 at 22:45
  • That's true. But his question asks how to do it without using `async: false`. – Barmar May 08 '14 at 22:46
  • @Barmar: Where does he ask how to do it without `async:false`? – yankee May 08 '14 at 22:49
  • The title, for one. He also said "I tried adding async:false", which I interpreted as saying that it's not part of the actual code he's trying to run. – Barmar May 08 '14 at 22:55
  • I tried both ways. But it looks like that because I have used jsonp, synchonicity was not allowed. Thus when I took it out, it worked as I expected. Of course, I kept async: false as a parameter. Thanks for all the responses. I apologize that this looked liked previous questions, but it really was a different problem and related to the use of jsonp versus json. – harmonickey May 09 '14 at 00:45

2 Answers2

1

Data type jsonp does not support async:false

https://api.jquery.com/jQuery.ajax/ Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.

Should be easy to work around that now that you know.

user1863643
  • 66
  • 5
0

You need to use a function that you call at the end of your success callback. E.g. :

var result;
console.log("First");
$.ajax ({
    dataType: "jsonp",
    url: url,
    async: false,
    success: function(data) {
        result = data;
        console.log("Result: " + result);
        console.log("Second");
        afterSuccess();
    },
    error: function(err) {
        console.log(JSON.stringify(err))
    }
});

var afterSuccess = function() {
  console.log("Third");

  console.log("Data: " + result);
};

Note it would be cleaner to not use the higher-scope result variable, but instead to pass the result to afterSuccess as a parameter

Greg
  • 3,370
  • 3
  • 18
  • 20