从异步 JavaScript 方法返回值？

IT技术 javascript asynchronous methods return
2021-03-10 20:16:30

我遇到了一个问题，我似乎无法从我在 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' 大概是因为赋值是在函数完成之前完成的。我不太确定如何解决这个问题。有没有办法可以从这个函数返回这个值？

2个回答

最好的办法是将回调传递给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 的自然风格作斗争是一场失败的战斗。

哇谢谢。我从来没有想过。我只是认为您可以只返回 onload() 函数内的值，但是该函数又是异步的，因此它在函数完成之前返回！非常感激！
2021-04-16 20:16:30

这是回调的问题。“答案”将在稍后的时间发生，而不是在评估方法的过程中。在这里返回几乎没有用。

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

reader.onload = function(e) { 
  // handle here the result
  // do something with e.target.result
};
其它你可能感兴趣的问题
上一篇是否可以仅使用 JavaScript（客户端方法）在浏览器中为已识别的 MIME 类型启动下载提示？ 下一篇JS检查深层对象属性是否存在