JS异步函数队列功能实例分析
本文实例讲述了JS异步函数队列功能。分享给大家供大家参考，具体如下：
场景：
做直播，会有入场消息，入场特效，用户如果有坐骑，需要给他展示几秒钟的坐骑特效，如果几个人同时进场，那该怎么展示呢？这时候就会想到setTimeout函数，对，思路不错，但是，异步函数队列怎么实现呢？直接上代码：
varQueue=function(){
this.list=[];
};
Queue.prototype={
constructor:Queue,
queue:function(fn){
this.list.push(fn)
returnthis;
},
wait:function(ms){
this.list.push(ms)
returnthis;
},
dequeue:function(){
varself=this,
list=self.list;
self.isdequeue=true;
varel=list.shift()||function(){};
if(typeofel=="number"){
setTimeout(function(){
self.dequeue();
},el);
}elseif(typeofel=="function"){
el.call(this)
if(list.length){
self.dequeue();
}else{
self.isdequeue=false;
}
}
}
};
例子：
如果a,b差不多同时进来；
c在a,b还没完全出队列的时候，进来的；
d在a,b,c都除了队列之后再进来的。
varq=newQueue();
functiona(){
console.log("a执行了",newDate());
}
functionb(){
console.log("b执行了",newDate());
}
functionc(){
console.log("c执行了",newDate());
}
functiond(){
console.log("d执行了",newDate());
}
q.wait(2000);
q.queue(a);
q.wait(2000);
q.queue(b);
q.dequeue();
setTimeout(function(){//3S之后进来的
q.wait(2000);
q.queue(c);
},3000);
setTimeout(function(){//8S之后进来的
q.wait(2000);
q.queue(d);
q.dequeue();
},8000);
这里我们就需要判断什么时候要调用dequeue来出队列了。（为什么c进队列的时候，不需要dequeue，但是d进来的时候就需要dequeue了呢？）
但是一般我们是无法知道用户什么时候进场的，一般都是进队列了，就该能出队列，但是如果用户是在空队列的时候进来的，之前的递归调用dequeue就执行完了，你进来需要再执行出队列的操作。
于是，代码应该这样：
varq=newQueue();
functiona(){
console.log("a执行了",newDate());
}
functionb(){
console.log("b执行了",newDate());
}
functionc(){
console.log("c执行了",newDate());
}
functiond(){
console.log("d执行了",newDate());
}
q.wait(2000);
q.queue(a);
if(!q.isdequeue){
q.dequeue();
}
q.wait(2000);
q.queue(b);
if(!q.isdequeue){
q.dequeue();
}
setTimeout(function(){//3S之后进来的
q.wait(2000);
q.queue(c);
if(!q.isdequeue){
q.dequeue();
}
},3000);
setTimeout(function(){//8S之后进来的
q.wait(2000);
q.queue(d);
if(!q.isdequeue){
q.dequeue();
}
},8000);
这样，每进一次队列，就判断要不要出队列，事情就OK了。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。