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

 更新时间:2017年11月28日 14:47:10   作者:异次元的玫瑰园  
这篇文章主要介绍了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程序设计有所帮助。

相关文章

  • 滑动门,简洁,新手上路制作篇 (小鸽子系列)

    滑动门,简洁,新手上路制作篇 (小鸽子系列)

    滑动门,简洁,新手上路制作篇 (小鸽子系列)...
    2007-04-04
  • 使用layer弹窗,制作编辑User信息页面的方法

    使用layer弹窗,制作编辑User信息页面的方法

    今天小编就为大家分享一篇使用layer弹窗,制作编辑User信息页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS生态系统加速npm脚本优化及性能分析探索

    JS生态系统加速npm脚本优化及性能分析探索

    这篇文章主要为大家介绍了JS生态系统加速npm脚本优化及性能分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • uniapp中使用render.js进行openlayers、arcgis等地图操作实战指南

    uniapp中使用render.js进行openlayers、arcgis等地图操作实战指南

    renderjs是一个运行在视图层的js,它比WXS更加强大,它只支持app-vue和h5,下面这篇文章主要给大家介绍了关于uniapp中使用render.js进行openlayers、arcgis等地图操作的相关资料,需要的朋友可以参考下
    2024-01-01
  • Js过滤空格的实现代码

    Js过滤空格的实现代码

    Js空格过滤代码,这个实用性很强,可以省去用动态语言过滤字符的麻烦,减轻服务器压力,而且JS执行速度较快
    2013-03-03
  • Axios get post请求传递参数的实现代码

    Axios get post请求传递参数的实现代码

    axios是基于promise用于浏览器和node.js的http客户端,支持浏览器和node.js,能拦截请求和响应,这篇文章主要介绍了axios get post请求传递参数的操作代码,需要的朋友可以参考下
    2022-11-11
  • JavaScript中null和undefined的区别详解

    JavaScript中null和undefined的区别详解

    null 是一个原始值,表示“无”或“空值”,它通常用于指示变量应有的对象或值不存在,undefined 是一个原始值,表示“未定义”,本文给大家详细介绍了JavaScript中null和undefined的区别,需要的朋友可以参考下
    2024-10-10
  • Pyqt5实现多线程程序的使用示例

    Pyqt5实现多线程程序的使用示例

    Pyqt常常使用主从架构(Master-Workers 架构)来避免界面卡死的情况,本文主要介绍了Pyqt5实现多线程程序的使用示例,感兴趣的可以了解一下
    2023-11-11
  • js仿微博动态栏功能

    js仿微博动态栏功能

    本文主要介绍了js仿微博动态栏功能的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript 对象成员的可见性说明

    JavaScript 对象成员的可见性说明

    与java等基于类的面向对象语言的private、protected、public等关键字的用途类似,基于对象的JavaScript语言,在对象构造上也存在类似的成员可见性问题。
    2009-10-10

最新评论