文件API Javascript FileReader onload

时间:2014-04-02 15:26:43

标签: javascript jquery promise jquery-deferred fileapi


我正在使用带有Javascript的文件API。
我需要等待onload方法的完成,我该怎么做?

reader.onload = function (e) {
    contents = reader.result;
    var addAttchCallBack = loadRequestExecutor();
    addAttchCallBack.done(function (data) {
        alert("ok");   
    })
};
alert("Ko");

我总是在" Ko"
之前看到 N.B:函数loadRequestExecutor()正确返回一个promise obj 感谢,NK

1 个答案:

答案 0 :(得分:1)

你真的需要研究异步行为回调,然后继续理解promises,因为你的例子是回调和承诺的奇怪组合,但是,试着解释基本条件是怎么回事:

示例1:

您始终首先看到KO,因为第一个示例执行此操作:

  1. 将函数分配给稍后将回调的属性
  2. 显示KO提醒
  3. 稍后文件加载,启动执行程序,完成后(如果有)警报确定
  4. 所以,基本上你的onload函数只会在文件加载(异步)后被调用,所以下一行的alert会立即执行。

    示例2:

    第二个例子,在评论中,是:

    $.when(reader.onload = function (e) {
        contents = reader.result;
        return loadRequestExecutor();
    }).done(function (a) {
        alert("ok");
    });
    alert("KO");
    

    转换为:

    1. 将函数分配给稍后将回调的属性
    2. 将相同的功能传递给when但不执行!!!
    3. 显示KO提醒
    4. 稍后加载文件时,将loadRequestExecutor()返回给文件读取器!!!
    5. 最终结果是将承诺返回到等待,这可能是你的意思,所以它永远不会按预期工作。

      <强>建议:

      我不太了解插件,但您似乎需要记录与加载请求执行程序相关的承诺,如果这是您想要等待的。

      // Create the loadRequestExecutor and record the promise
      var addAttchCallBack = loadRequestExecutor();
      
      // Setup the onload callback  
      reader.onload = function (e) {
          contents = reader.result;
          alert("ok - file load is done");   
      };
      
      // Listen for the loadRequestExecutor to complete
      addAttchCallBack.done(function (data) {
          alert("Ko - loadRequestExecutor is done");
      })
      
      alert("I am just an alert that will happen first, as everything above is asynchronous!");
      

      你的整体目标在问题上并不明确,所以这个答案主要集中在为你的两次尝试无法按预期工作的原因进行抽样。