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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
Node.js的特点详解
Feb 03 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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版(3)
2006/10/09 PHP
利用php生成验证码
2017/02/23 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
python 容器总结整理
2017/04/04 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python实现程序重启和系统重启方式
2020/04/16 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
广州地球村科技数据库题目
2016/04/25 面试题
高中生班主任评语
2014/04/25 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
教师工作表现评语
2014/12/31 职场文书
求职简历自我评价范文
2015/03/10 职场文书
班主任开场白
2015/06/01 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL