使用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就执行完了，你进来需要再执行 出队列的操作。

赣极购物商城网店建站软件系统

大小仅1兆左右 ，足够轻便的商城系统； 易部署，上传空间即可用，安全，稳定； 容易操作，登陆后台就可设置装饰网站； 并且使用异步技术处理网站数据，表现更具美感。 前台呈现页面，兼容主流浏览器，DIV+CSS页面设计； 如果您有一定的网页设计基础，还可以进行简易的样式修改，二次开发， 发布新样式，调整网站结构，只需修改css目录中的css.css文件即可。 商城网站完全独立，网站源码随时可供您下载

下载

于是，代码应该这样：

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);

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在zTree中如何实现交互选项卡

详细讲解EasyUI中abs的使用

在vue-cli中有关webpack3提速优化方面的问题