CODEWITHSUNDEEP
javascriptasynchronousmethodsreturn
Kevin
Kevin

Reputation: 2888

Returning value from asynchronous JavaScript method?

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??

Upvotes: 9

Views: 14367

Answers (2)

ic3
ic3

Reputation: 7680

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
};

Upvotes: 0

mu is too short
mu is too short

Reputation: 434585

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.

Upvotes: 23

Related Questions