1NetMedia_Blog

<< 单对象编程原生js编写canvas画板...  类别: JS 打开浏览器窗口的一些方法总结 >>
js异步函数队列
[ 日期: 2019-04-29 5:52:19 PM | 作者: admin | 来源: Original | 人气:98 | 晴天 | 心情: +2 ] 字号: 【
急速栏目链接:
标签:异步队列  |  

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了。

补充:
https://blog.csdn.net/rth362147773/article/details/77926702
   
Rss Comment  

没有相关评论

发表评论
请先注册,才能发表评论!
- 注册 -