这篇文章主要介绍了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);
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在zTree中如何实现交互选项卡
详细讲解EasyUI中abs的使用
在vue-cli中有关webpack3提速优化方面的问题
以上就是使用JS如何实现异步函数的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2748914.html
