JS异步函数队列功能实例分析
作者:异次元的玫瑰园 时间:2024-04-22 13:26:28
本文实例讲述了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程序设计有所帮助。
来源:https://www.cnblogs.com/MissFelicia/p/6650396.html
标签:JS,队列
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Silverlight 3 Beta出来了
2009-03-19 13:17:00
一文彻底理清session、cookie、token的区别
2024-01-02 06:16:29
![](https://img.aspxhome.com/file/2023/6/132376_0s.jpg)
更改SQL Server 2005数据库中tempdb位置的方法
2024-01-25 17:46:35
Python 批量合并多个txt文件的实例讲解
2022-09-18 07:39:47
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2023-07-02 17:01:35
Python实现注册、登录小程序功能
2022-12-03 17:50:11
![](https://img.aspxhome.com/file/2023/6/68326_0s.png)
php实现断点续传大文件示例代码
2024-04-28 09:45:17
Python骚操作完美实现短视频伪原创
2023-09-18 08:16:55
如何在MySQL查询结果集中得到记录行号
2008-12-17 15:00:00
利用python实现xml与数据库读取转换的方法
2024-01-23 06:27:51
用Mimer Validator检查SQL查询
2024-01-24 17:12:01
SEO与“nofollow”及“external nofollow”
2007-12-15 09:31:00
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2024-05-11 09:42:52
![](https://img.aspxhome.com/file/2023/5/125945_0s.gif)
Python采集代理ip并判断是否可用和定时更新的方法
2022-12-01 15:19:05
Python %r和%s区别代码实例解析
2023-10-07 17:01:08
几个常见的MySQL的可优化点归纳总结
2024-01-13 11:32:14
不管你的Python报什么错,用这个模块就能正常运行
2023-08-29 14:42:43
![](https://img.aspxhome.com/file/2023/3/62863_0s.jpg)
Pycharm学习教程(5) Python快捷键相关设置
2021-08-08 18:56:44
![](https://img.aspxhome.com/file/2023/0/134490_0s.png)
opencv调用yolov3模型深度学习目标检测实例详解
2022-04-30 19:37:55
![](https://img.aspxhome.com/file/2023/1/95201_0s.jpg)
MySQL8.0中的窗口函数的示例代码
2024-01-14 12:30:26
![](https://img.aspxhome.com/file/2023/2/128082_0s.png)