js非同步函數隊列

標籤：pre   非同步   var   list.sh   div   cti   type   lis   span   

情境：

做直播，會有入場訊息，入場特效，使用者如果有坐騎，需要給他展示幾秒鐘的坐騎特效，如果幾個人同時進場，那該怎麼展示呢？這時候就會想到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非同步函數隊列