淺談關于JS下大批量異步任務按順序執(zhí)行解決方案一點思考

//循環(huán)狀態(tài)標記,0為初始狀態(tài),1為正常,2為出錯
let status = 0;

/* 新建Filereader,讀取文件切片,返回一個promise
* 把讀取成功的arraybuffer通過reslove傳出
*/
const createReader = ()=> {
 return new Promise ((reslove, reject)=> {
 let reader = new Filereader();
 ...
 reader.onload = ()=> {
 reslove(reader.result)
 }
 reader.onerror = ()=> reject()
 })
}

// ajax發(fā)送createReader方法讀取到的Buff
const createXhr = ()=> {
 const xhr= new XMLHttpRequest();
 return new Promise ((reslove, reject)=> {
 ...
 xhr.onreadystatechange= ()=> {
 ...
 //如果readyState == 4,status == 200且服務器的狀態(tài)碼存在,更改全局標記為1
 status = 1;
 reslove()
 }
 })
}

//每一輪循環(huán)開始前都檢查一次全局狀態(tài)標記
const checkStatus = ()=> {
 ...
 if (status == 1) {
 loop()
 }
}

//循環(huán)過程的鏈式調用
const loop = ()=> {
 createReader().then(()=> createXhr()).then(()=> checkStatus());
}

//模仿node.js的EventEmitter
class EventEmitter {
 constructor() {
 this.handler = {};
 }
 on(eventName, callback) {
 if (!this.handles){
 this.handles = {};
 }
 if (!this.handles[eventName]) {
 this.handles[eventName] = [];
 }
 this.handles[eventName].push(callback);
 }
 emit(eventName,...arg) {
 if (this.handles[eventName]) {
 for (var i=0;i<this.handles[eventName].length;i++) {
 this.handles[eventName][i](...arg);
 }
 }
 }
 }

let ev= new EventEmitter();
...
//監(jiān)聽createReader事件,如果讀取buffer成功就觸發(fā)toajax事件來上傳切片
ev.on('createReader', ()=> {
 let reader = new Filereader();
 ...
 reader.onload = ()=> {
 ev.emit('toajax')
 }
})

//監(jiān)聽toajax事件,如果上傳成功,就觸發(fā)createReader事件開始讀取下一切片
ev.on('toajax', ()=> {
 let xhr= new XMLHttpRequest();
 ...
 xhr.onreadystatechange = ()=> {
 //如果readyState == 4,status == 200且服務器的狀態(tài)碼存在
 ev.emit('createReader')
 }
})

//全局狀態(tài)標記
let status = 0;

//讀取切片
const createReader = ()=> {
 let reader = new Filereader();
 ...
 reader.onload = ()=>status = 1
}

//上傳切片
const createXhr = ()=> {
 let xhr= new XMLHttpRequest();
 ...
 xhr.onreadystatechange = ()=> {
 ...
 //如果readyState == 4,status == 200且服務器的狀態(tài)碼存在
 status = 2
 }
}

/* 設置一個間隔時間極短的計時器,根據status決定下一步的任務,
* 上傳完成后定時器自動清除自己
* 另外有判斷文件是否上傳完成的方法,這里就不寫了
*/
let timer = setInterval(()=> {
 if (status == 2) {
 createReader();
 } else if (status == 1) {
 createXhr();
 } else if (status == 3) {
 clearInterval(timer);
 }
},10)