JS异步函数队列功能实例分析

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了。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

tag:函数异步队列实例分析功能

相关内容