Returning value from asynchronous JavaScript method?

Question

I have run into a problem where I can't seem to get a value from an asynchronous JavaScript method I am running in Jquery. My Jquery looks like this:

$(document).ready( function() {
$('#splash_image_upload').change( function() {
    var file = this.files[0];
    var blob_string = create_blob(file);
    alert(blob_string);
 });

I am able to access the value that comes from the 'onload' event but I cannot seem to return the actual value. I have tried this:`

function create_blob(file) {
    var reader = new FileReader();
    reader.onload = (function() { return function(e) { return e.target.result; }; })();
    reader.readAsDataURL(file);
}

Every time I execute this function the value of the 'blob_str' variable is 'undefined' presumably because the assignment is done before the function is finished. I am not really sure how to go about this. Is there a way I can return this value from this function??

related: How to return the response from an AJAX call from a function? — Bergi
– Bergi, Commented Apr 2, 2013 at 13:26

mu is too short · Accepted Answer · 2011-06-02 06:16:45Z

23

Your best bet is to pass a callback to create_blob and let the callback do whatever needs to be done, something like this:

create_blob(file, function(blob_string) { alert(blob_string) });

function create_blob(file, callback) {
    var reader = new FileReader();
    reader.onload = function() { callback(reader.result) };
    reader.readAsDataURL(file);
}

This sort of chicanery is pretty standard with asynchronous calls (AJAX in particular). You could wire up some fragile mess of timers in an attempt for force synchronically but fighting the natural style of an API is a losing battle.

answered Jun 2, 2011 at 6:16

mu is too short

436k71 gold badges863 silver badges822 bronze badges

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

1 Comment

Kevin Over a year ago

Wow thanks. I never would have thought. I simply thought you could just return the value inside the onload() function but then again the function is asynchronous so it is returned before the function is finished! Much appreciated!

ic3 · Accepted Answer · 2011-06-02 06:18:30Z

0

This is the issue with callbacks. The 'answer' is going to happen later in another moment and not during the evaluation of the method. Little use making a return here.

Your callback needs to handle the return value making the code looks more complicated :

reader.onload = function(e) { 
  // handle here the result
  // do something with e.target.result
};

answered Jun 2, 2011 at 6:18

ic3

7,74015 gold badges73 silver badges123 bronze badges

Collectives™ on Stack Overflow

Returning value from asynchronous JavaScript method?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related