当前位置:首页 > 日记 > 正文

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

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

本文实例讲述了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数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

bootstrap datepicker插件默认英文

bootstrap datepicker插件默认英文

修改,插件,默认,中文,英文,datepicker插件默认为英文,而且格式为:mm/dd/yyyy这种情况,看起来不怎么直观。修改目标:1、默认显示为中文 2、格式为:yyyy年mm月dd日 需要修改两个地方:1、更改datas对象, 增加zh-cn语言选项;参见源代码的1419行var date…

怎样给word文档中的添加文字

怎样给word文档中的添加文字

文字,文档,步骤,图片,电脑软件,  在word文档中插入的图片,我们经常需要图图片做说明或者在图片中添加备注文字,那么怎么在图片中添加文字呢?接下来就由小编给大家分享下给word文档中图片添加文字的技巧,希望能帮助到您。给文档图片添加文字…

PPT2007怎么拆分单元格 ppt2007拆

PPT2007怎么拆分单元格 ppt2007拆

拆分,方法,单元格,电脑软件,  在使用excel2007做表格的时候想要拆分表格单个单元格,但是不知道excel2007怎么拆分表格单个单元格?其实方法有两个哦,不知道的朋友就跟小编一起来看看PPT2007拆分单元格的方法吧,欢迎大家来到学习ppt技巧。PPT2…

如何在Word文档中使用内容交叉引用

如何在Word文档中使用内容交叉引用

交叉引用,文档,内容,如何在,电脑软件,  交叉引用就是在文档的一个位置引用文档另一个位置的内容。交叉引用常应用于需要互相应用内容的情况下,可以使用户尽快找到想要找到的内容,同时能够保证文档的结构条理清晰。以下是小编为您带来的关于…

ppt2010幻灯片怎么添加切换效果随

ppt2010幻灯片怎么添加切换效果随

动画效果,方法,设置,幻灯片,效果,  powerpoint2003中的“自定义动画”,在powerpoint2010中没有了,那么您或许还很需要如此功能,当时没有怎么办呢?下面小编就告诉你ppt2010设置随机动画效果的方法,希望能帮到大家。ppt2010设置随机…

excel2010 合并计算的方法

excel2010 合并计算的方法

合并,方法,计算,电脑软件,  在Excel中录入好数据以后通常需要统计数据,其中合并计算也颇为常用。接下来是小编为大家带来的excel2010 合并计算的方法,希望对你有用。excel2010 合并计算的方法:  合并计算步骤1:如下图,我们要把初一(1)班、初…

在Excel2003中如何隐藏行或列

在Excel2003中如何隐藏行或列

电脑软件,  当Excel表格太大的时候,我们想要对其中的某一些数据进行比较分析等,如果有一个好的办法让它们能贴近一点,但不要删除中间无关的数据就太好了。以下是小编为您带来的关于在Excel2003中隐藏行或列,希望对您有所帮助。在Excel2003中…

怎么在excel中提取数字在excel中提

怎么在excel中提取数字在excel中提

数字,步骤,方法,电脑软件,excel,  利用内容重排和分列实现简单的提取数字,以达到方便工作的目的,下面小编就教你怎么在我excel中提取数字。希望对你有帮助!excel中提取数字的步骤打开excel文件,选中需要提取数字的内容,为了方便操作,将内容复制…

Word中2007版进行调整行距的操作技

Word中2007版进行调整行距的操作技

调整,操作技巧,行距,操作步骤,电脑软件,  在用word进行排版时,调整行距是会经常用到的,这里小编详细的教大家如何来调整。今天,小编就教大家在Word中2007版进行调整行距的操作技巧。Word中2007版进行调整行距的操作步骤首先选中要调整行距的…

怎么使用excel2007汉字转拼音功能e

怎么使用excel2007汉字转拼音功能e

金额,转换,步骤,使用教程,方法,  其实excel2007中有一个功能,能将汉字转成拼音,下面跟小编来试试excel2007汉字转拼音功能吧。希望对你有帮助!excel2007汉字转拼音功能的使用步骤首先先在工具箱点开汉字转拼音功能。excel2007汉字转拼音功能…

会计要掌握的Excel表格哪些技巧

会计要掌握的Excel表格哪些技巧

表格,技巧,必会,会计,会计人,  从Excel中的一些鲜为人知的技巧入手,领略一下关于Excel的别样风情,也许你已利用Excel函数实现过上千次的复杂运算。以下是小编为您带来的关于会计人必会的Excel表格技巧,希望对您有所帮助。会计人必会的Excel…

在Excel2016表格中怎么导入网页的

在Excel2016表格中怎么导入网页的

网页内容,网页,表格,内容,电脑软件,  有时候,我们需要在网络上找一些内容,而将其内容直接制作成表格的内容。虽然可以直接复制粘贴,但我们也有更方便的办法,那就是直接在EXCEL中将网页导入。以下是小编为您带来的关于Excel2016表格导入网页内…