原生js异步队列任务

场景：有不同的ajax在请求数据，返回后，把该执行的东西，做成一个任务，放到队列中，然后排队执行

所以想做一个任务队列，后续可能还要做一个多消费者订阅消费的模式，现在先出一个简单的任务队列

<pre name="code" class="html">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Js Async Queue&lt;/title&gt;
&lt;script&gt;
var AsyncQueue={
queue:[],
init:function(){
window.addEventListener("message",function(e){
//只响应AsyncQueue的召唤
if(e.data==="AsyncQueue"){
e.stopPropagation();//阻止事件冒泡
if(AsyncQueue.queue.length&gt;0){
//执行并删除队列中的第一个
var _task=AsyncQueue.queue.shift();
_task.excute(_task.data);
}

}
},true);
},
addTask:function(task){
//添加到队列
AsyncQueue.queue.push(task);
window.postMessage("AsyncQueue","*");
}
}

//初始化队列
AsyncQueue.init();

for(var i=0;i&lt;10;i++){
var _task={
data:{name:i},
excute:function(param){
//模拟后台请求
var _tt=Math.random()*1000;//因为有些业务快，有些业务慢
document.getElementById("id"+param.name).innerHTML="任务执行中.....";
setTimeout(function(){
console.info(param.name);
document.getElementById("id"+param.name).innerHTML="任务完成";
},_tt);

}
}
AsyncQueue.addTask(_task);
}

//模拟隔一段时间再加入的任务
setTimeout(function(){
var _uuid="test0001";
var oDiv=document.createElement('div');
oDiv.id=_uuid;
oDiv.style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;";

var container =document.getElementById('id9');
var node=container.nextSibling;
container.parentNode.insertBefore(oDiv, node);

var _task={
data:{name:_uuid},
excute:function(param){
//模拟后台请求
var _tt=Math.random()*1000;//因为有些业务快，有些业务慢
document.getElementById(param.name).innerHTML="任务执行中.....";
setTimeout(function(){
console.info(param.name);
document.getElementById(param.name).innerHTML="任务完成";
},_tt);

}
}
AsyncQueue.addTask(_task);
},6000);

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;Hello Js Async Queue&lt;/div&gt;
&lt;div id="id0" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id1" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id2" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id3" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id4" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id5" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id6" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id7" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id8" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;div id="id9" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>