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 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
DIV始终居中的js代码
Feb 17 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 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字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php实现json编码的方法
2015/07/30 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python下的twisted框架入门指引
2015/04/15 Python
深入理解python对json的操作总结
2017/01/05 Python
python 连接sqlite及简单操作
2017/06/30 Python
python设置环境变量的原因和方法
2019/06/24 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
高级Java程序员面试要点
2013/08/02 面试题
工商管理专业毕业生求职信
2014/05/26 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js