我們都知道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非同步函數佇列功能及相關操作技巧，希望對大家有幫助。
相關推薦：
以上是JS非同步函數佇列功能及相關操作技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
