原生js异步队列任务 JavaScript队列异步
程序员文章站
2022-04-14 17:49:21
...
场景：有不同的ajax在请求数据，返回后，把该执行的东西，做成一个任务，放到队列中，然后排队执行
所以想做一个任务队列，后续可能还要做一个多消费者订阅消费的模式，现在先出一个简单的任务队列
所以想做一个任务队列，后续可能还要做一个多消费者订阅消费的模式，现在先出一个简单的任务队列
<html>
<head>
<title>Js Async Queue</title>
<script>
var AsyncQueue={
queue:[],
init:function(){
window.addEventListener("message",function(e){
//只响应AsyncQueue的召唤
if(e.data==="AsyncQueue"){
e.stopPropagation();//阻止事件冒泡
if(AsyncQueue.queue.length>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<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);
</script>
</head>
<body>
<div>Hello Js Async Queue</div>
<div id="id0" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id1" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id2" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id3" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id4" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id5" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id6" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id7" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id8" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
<div id="id9" style="width:100px;height:100px;border:1px solid #000;margin:5px;float:left;"></div>
</body>
</html>