原生js异步队列任务

jjjssh

浏览: 74105 次
性别:
来自: 深圳

最近访客更多访客>>

hacker507

mr_gx

734994373

lpy1016lc

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (46)

社区版块

存档分类

JavaScript 队列异步

场景：有不同的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>

分享到：