从异步JavaScript方法返回值？

Question

我遇到了一个问题，无法从我在Jquery中运行的异步JavaScript方法中获取值。我的Jquery代码如下：

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

我能够访问来自“onload”事件的值，但似乎无法返回实际值。我尝试过这样做：

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

每次执行此函数时，'blob_str'变量的值都是'undefined'，可能是因为赋值在函数完成之前执行了。我不太确定该怎么做。有没有办法从这个函数中返回这个值？

- Kevin

---

如何从函数中返回 AJAX 调用的响应？ - Bergi

Answer 1

你最好的选择是将回调函数传递给create_blob，让回调函数执行任何需要完成的任务，类似于这样：

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

在异步调用（特别是AJAX）中，这种欺骗性操作非常常见。你可以尝试通过一些脆弱的定时器来实现同步，但与API的自然风格抗争是徒劳无功的。

- mu is too short

---

哇，谢谢。我从未想过。我只是认为你可以在 onload() 函数内返回值，但再次说明该函数是异步的，所以它在函数完成之前就被返回了！非常感谢！ - Kevin

Answer 2

这是回调函数的问题。答案将在另一个时刻晚些时候发生，而不是在方法评估期间发生。在此处进行返回没有太大作用。

您的回调需要处理返回值，使代码看起来更加复杂：

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

- ic3