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

时间: 2024-10-08 15:58:22

js异步函数队列的相关文章

详解如何构建Promise队列实现异步函数顺序执行

场景 有a.b.c三个异步任务,要求必须先执行a,再执行b,最后执行c 且下一次任务必须要拿到上一次任务执行的结果,才能做操作 思路 我们需要实现一个队列,将这些异步函数添加进队列并且管理它们的执行,队列具有First In First Out的特性,也就是先添加进去的会被先执行,接着才会执行下一个(注意跟栈作区别) 大家也可以类比一下jQuery的animate方法,添加多个动画也会按顺序执行 解决 模拟3个异步函数 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Node.js用ES6原生Promise对异步函数进行封装

版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.转载请注明来源http://blog.csdn.net/azureternite 目录(?)[+] Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初始状态,即等待操作的执行 fulfilled:成功的操作 rejected:失败的操作 pending的状态

Node.js 回调函数 1) 阻塞 ,同步 2) 非阻塞 ,异步.

1.阻塞. 同步. 1) 读取的文件: input.txt 菜鸟教程官网地址:www.runoob.com 2) main.js 1 var fs = require("fs"); 2 3 //同步读取, 阻塞代码,按顺序执行的 4 var data = fs.readFileSync('input.txt'); 5 6 console.log(data); 7 console.log(data.toString()); 8 console.log("程序执行结束!"

1. 关于GCD的使用(串并行队列和同步异步函数的问题)

/*------------------------------ GCD使用 1.队列和任务------------------------------------------*/ 重点:1."串行队列"? "并发队列"? 2.block? { 1.GCD(Grand Central Dispatch) ---- '牛逼的中枢调度器'! // C语言框架 / 自动管理线程的生命周期(创建/释放) 推出GCD的目的:取代NSThread! 为"多核"

js的for循环中出现异步函数,回调引用的循环值总是最后一步的值?

这几天跟着视频学习node.js,碰到很多的异步函数的问题,现在将for循环中出现的异步函数回调值的问题总结如下: 具体问题是关于遍历文件夹中的子文件夹的,for循环包裹异步函数的代码: for (var i = 0; i < files.length; i++) { var itemFile = files[i]; fs.stat("./uploads/" + itemFile, function (err, stats) { if (stats.isDirectory())

js callback promise async await 几种异步函数处理方式

***callback  这个是最常用的也是最简单的 ,比如在ajax网络请求中,返回请求完成返回的数据 回调函数就是把一个函数当成另一个函数的参数,可以传递函数内的局部变量,也可以异步完成一些操作,在函数的实现里调用回调函数,在函数的调用里实现回调函数 // 回調函數的方式 閉包 可以獲取函數內部的局部變量 function testCallback(callback) { let a = 1; let b = 2; if (a < b) { callback && callbac

js的for循环中出现异步函数,回调引用的循环值始终是最后的值

一.问题 今天工作中解决bug发现是由“for循环的异步函数,回调引用的循环值始终是最后的值”的现象导致的,如: for (var i = 0; i < files.length; i++) { var itemFile = files[i]; fs.stat("./uploads/" + itemFile, function (err, stats) { if (stats.isDirectory()) { console.log(itemFile+i); } else { c

Meteor.js异步全解

翻译来源: http://phucnguyen.info/blog/everything-you-need-to-know-about-async-meteor/ posted in Web Development on October 26, 2014 by Phuc Nguyen SHARE Meteor是运行在Node.js之上的.这意味着I/O行为,比如读文件或者发送网络请求不会阻塞整个程序.事实上,当异步行为执行结束后,我们可以提供回调.好了解不?下面会有图画解释. 假设我们想读一个加

node js 异步执行流程控制模块Async介绍

1.Async介绍 sync是一个流程控制工具包,提供了直接而强大的异步功能.基于Javascript为Node.js设计,同时也可以直接在浏览器中使用. Async提供了大约20个函数,包括常用的 map, reduce, filter, forEach 等,异步流程控制模式包括,串行(series),并行(parallel),瀑布(waterfall)等. 项目地址:https://github.com/caolan/async 2. Async安装 npm install async 3.