JS如何实现异步函数队列功能

小编给大家分享一下JS如何实现异步函数队列功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体如下：

场景：

做直播，会有入场消息，入场特效，用户如果有坐骑，需要给他展示几秒钟的坐骑特效，如果几个人同时进场，那该怎么展示呢？这时候就会想到setTimeout函数，对，思路不错，但是，异步函数队列怎么实现呢？直接上代码：

var Queue = function() {     this.list = []; }; Queue.prototype = {     constructor: Queue,     queue: function(fn) {       this.list.push(fn)       return this;     },     wait: function(ms) {       this.list.push(ms)       return this;     },     dequeue: function() {       var self = this,         list = self.list;       self.isdequeue = true;       var el = list.shift() || function() {};       if (typeof el == "number") {         setTimeout(function() {           self.dequeue();         }, el);       } else if (typeof el == "function") {         el.call(this)         if (list.length) {           self.dequeue();         } else {           self.isdequeue = false;         }       }     } };

例子：

如果a,b差不多同时进来；
c在a,b还没完全出队列的时候，进来的；
d在a,b,c都除了队列之后再进来的。

var q = new Queue(); function a() {     console.log("a执行了", new Date()); } function b() {     console.log("b执行了", new Date()); } function c() {     console.log("c执行了", new Date()); } function d() {     console.log("d执行了", new Date()); } 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就执行完了，你进来需要再执行 出队列的操作。

于是，代码应该这样：

var q = new Queue();   function a() {     console.log("a执行了", new Date());   }   function b() {     console.log("b执行了", new Date());   }   function c() {     console.log("c执行了", new Date());   }   function d() {     console.log("d执行了", new Date());   }   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了。

以上是“JS如何实现异步函数队列功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！