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 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 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解析url的三个示例
2014/01/20 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python基础教程项目三之万能的XML
2018/04/02 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
python搜索算法原理及实例讲解
2020/11/18 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
退休教师追悼词
2015/06/23 职场文书
2016继续教育研修日志
2015/11/13 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle