js异步函数队列

Posted 2020-09-07 异次元的玫瑰园

场景：

做直播，会有入场消息，入场特效，用户如果有坐骑，需要给他展示几秒钟的坐骑特效，如果几个人同时进场，那该怎么展示呢？这时候就会想到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了。