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


Posted in Javascript onNovember 28, 2017

本文实例讲述了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 相关文章推荐
bootstrap data与jquery .data
Jul 07 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
最简单的tab切换实例代码
May 13 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
js实现磁性吸附的示例
Oct 26 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 #Javascript
JS+HTML+CSS实现轮播效果
Nov 28 #Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 #Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 #Javascript
vue-music关于Player播放器组件详解
Nov 28 #Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 #Javascript
JS实现的找零张数最小问题示例
Nov 28 #Javascript
You might like
PHP调用Webservice实例代码
2011/07/29 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
小学生手册家长评语
2014/04/16 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
代理人委托书
2014/09/16 职场文书
2015年教研工作总结
2015/05/23 职场文书
教育教学读书笔记
2015/07/02 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书