按顺序处理文件内容答案

【问题标题】：Process file contents sequentially按顺序处理文件内容
【发布时间】：2016-10-07 13:32:11
【问题描述】：

您好，我有几个文件需要按特定顺序读取。

为此，我尝试实现由前一个文件的onloadend 函数产生的文件读取。

我的 MWE 在这里：https://jsfiddle.net/q3h49dL2/

使用以下测试代码：

class Chain {
  // File Chain ops
  addReadJob(job) {
    console.log("Queuing:", job.file.name);

    if (this.firstjob === undefined) {
      this.firstjob = 0;
    }

    // Store previous job 
    var lastjob = this.firstjob;

    // Create new job that passes the previous job
    // as a readbeforefunc argument to new job.
    this.firstjob = function() {
      Task.readFile(job.file, job.task, lastjob);
    }
  }

  constructor() {
    //Let's create a bunch of jobs
    var job1 = {
      file: {name: "File1",text: "File1 contents"},
      task: Task.taskDoer1
    };
    var job2 = {
      file: {name: "File2",text: "File2 contents"},
      task: Task.taskDoer2
    };
    var job3 = {
      file: {name: "File3",text: "File3 contents"},
      task: Task.taskDoer1
    };

    // Now queue them
    this.addReadJob(job1);
    this.addReadJob(job2);
    this.addReadJob(job3);

    // And process them all from the first chain
    this.firstjob();
  }
}


class Task {
  static taskDoer1(text) {console.log("randomtask:", text);}
  static taskDoer2(text) {console.log("anotherrandomtask", text);}

  // !!!HERE PROBLEMS OCCUR!!!
  static readFile(file, callback, runbeforefunc = 0) {
    var fr = new FileReadPretend();

    fr.onloadend = function(text) {
      // Run previous job in chain first
      if (runbeforefunc !== 0) {
          runbeforefunc();
      }
      callback(text);
    }
    fr.readAsText(file);
  }
}


class FileReadPretend {
  constructor(){
     this.onloadend = null;
  }
  readAsText(file) {  
    var that = this;

    setTimeout(function() {
      that.onloadend(file.text);
      console.log("--read", file.name);
    }, 1000);
  }
}


new Chain();

一般的想法是我将一堆文件及其文件处理程序任务函数排队到链接队列中。

然后每个队列将队列中的前一个作业挂接到Task.readFile 中的runBeforeFunc，该作业在处理当前文件之前执行。

但这似乎不起作用，并且无论我是在 Task.readFile 函数中将 runbeforeFunc 移动到 callback(text) 语句之前还是之后，它仍然以错误的顺序执行作业。

我做错了什么？

【问题讨论】：

标签： javascript asynchronous filereader synchronous

【解决方案1】：

也许答案有点琐碎，但你为什么不直接改变顺序，比如；

 // Now queue them
    this.addReadJob(job3);
    this.addReadJob(job2);
    this.addReadJob(job1);

https://jsfiddle.net/4Lv10zk1/

【讨论】：

哈，是的，但我们只是说我必须重写整个调度程序来排队作业。有没有办法只通过修改Task.readFile 或(Chain).addReadJob 并保持当前队列顺序来做到这一点？

【解决方案2】：

解决了，实际上很简单：

addReadJob(job) {
   console.log("Queuing:", job.file.name);

   if (this.firstjob === undefined) {
       this.firstjob = function(){}; // dummy func
   }

   // Store previous job 
   var lastjob = this.firstjob;

   // Create new job that passes the previous job
   this.firstjob = function() {
        lastjob(); // <--- run lastjob first, duh!
        Task.readFile(job.file, job.task);
   }
}

【讨论】：