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 full screen 全屏显示页面元素的方法
Sep 27 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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 超链接 抓取实现代码
2009/06/29 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP文件操作实例总结
2016/09/27 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
canvas绘制多边形
2017/02/24 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python 连接sqlite及简单操作
2017/06/30 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
点球小游戏python脚本
2018/05/22 Python
详解python的argpare和click模块小结
2019/03/31 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
自我反省检讨书
2014/01/23 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
python基础之//、/与%的区别详解
2022/06/10 Python