¿Devuelve el valor del método de JavaScript asíncrono?

Question

Me he encontrado con un problema donde parece que no puedo obtener un valor de un método de JavaScript asíncrono que estoy ejecutando en Jquery. Mi Jquery se ve así:

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

estoy en condiciones de acceder al valor que viene del evento 'onload' pero me parece que no puede devolver el valor real. He intentado esto: `

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

Cada vez que se realiza esta función el valor de la variable 'blob_str' es 'indefinido', presumiblemente debido a que la asignación se realiza antes de que termine la función. No estoy muy seguro de cómo hacerlo. ¿Hay alguna manera de que pueda devolver este valor desde esta función?

Answer 1

Su mejor opción es pasar una devolución de llamada a create_blob y dejar que la devolución de llamada hacer lo que hay que hacer, algo como esto:

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

Este extremo de burla es bastante estándar con llamadas asíncronas (AJAX, en particular) Podrías conectar un frágil desorden de temporizadores en un intento de fuerza sincrónicamente, pero luchar contra el estilo natural de una API es una batalla perdida.

Answer 2

Este es el problema con las devoluciones de llamada. La 'respuesta' va a suceder más adelante en otro momento y no durante la evaluación del método. Poco uso haciendo un regreso aquí.

A su función tiene que manejar el valor de retorno haciendo que el código es más complicado:

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