快捷導(dǎo)航

JS異步函數(shù)隊列功能實例分析

更新時間：2017年11月28日 14:47:10 作者：異次元的玫瑰園

這篇文章主要介紹了JS異步函數(shù)隊列功能,結(jié)合實例形式分析了異步函數(shù)隊列的應(yīng)用場景、實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JS異步函數(shù)隊列功能。分享給大家供大家參考，具體如下：

場景：

做直播，會有入場消息，入場特效，用戶如果有坐騎，需要給他展示幾秒鐘的坐騎特效，如果幾個人同時進(jìn)場，那該怎么展示呢？這時候就會想到setTimeout函數(shù)，對，思路不錯，但是，異步函數(shù)隊列怎么實現(xiàn)呢？直接上代碼：

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差不多同時進(jìn)來；
c在a,b還沒完全出隊列的時候，進(jìn)來的；
d在a,b,c都除了隊列之后再進(jìn)來的。

var q = new Queue();
function a() {
    console.log("a執(zhí)行了", new Date());
}
function b() {
    console.log("b執(zhí)行了", new Date());
}
function c() {
    console.log("c執(zhí)行了", new Date());
}
function d() {
    console.log("d執(zhí)行了", new Date());
}
q.wait(2000);
q.queue(a);
q.wait(2000);
q.queue(b);
q.dequeue();
setTimeout(function(){//3S之后進(jìn)來的
    q.wait(2000);
    q.queue(c);
},3000);
setTimeout(function(){//8S之后進(jìn)來的
    q.wait(2000);
    q.queue(d);
    q.dequeue();
},8000);

這里我們就需要判斷什么時候要調(diào)用dequeue來出隊列了。（為什么c進(jìn)隊列的時候，不需要dequeue，但是d進(jìn)來的時候就需要dequeue了呢？）

但是一般我們是無法知道用戶什么時候進(jìn)場的，一般都是進(jìn)隊列了，就該能出隊列，但是如果用戶是在空隊列的時候進(jìn)來的，之前的遞歸調(diào)用dequeue就執(zhí)行完了，你進(jìn)來需要再執(zhí)行出隊列的操作。

于是，代碼應(yīng)該這樣：

var q = new Queue();
  function a() {
    console.log("a執(zhí)行了", new Date());
  }
  function b() {
    console.log("b執(zhí)行了", new Date());
  }
  function c() {
    console.log("c執(zhí)行了", new Date());
  }
  function d() {
    console.log("d執(zhí)行了", 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之后進(jìn)來的
    q.wait(2000);
    q.queue(c);
    if (!q.isdequeue) {
      q.dequeue();
    }
  }, 3000);
  setTimeout(function() { //8S之后進(jìn)來的
    q.wait(2000);
    q.queue(d);
    if (!q.isdequeue) {
      q.dequeue();
    }
  }, 8000);

這樣，每進(jìn)一次隊列，就判斷要不要出隊列，事情就OK了。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: