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

转载于:https://www.cnblogs.com/MissFelicia/p/6650396.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js是基于JavaScript运行的服务器端开发平台。它采用了异步非阻塞的事件驱动模型,因此能够高效地处理大量并发请求。 在Node.js中,异步处理是通过事件循环机制来实现的。当主线程中遇到异步操作(比如文件读写、网络请求等)时,它会将这些操作交给操作系统处理,并将相应的回调函数封装成事件对象放入事件队列中。主线程会继续执行后面的代码,直到同步代码执行完毕。 一旦主线程中的所有同步代码执行完毕,Node.js会循环检测事件队列,当某个事件被触发(比如异步操作完成),Node.js会调用相应的回调函数来处理这个事件。这种机制使得Node.js能够同时处理多个请求,而不会阻塞主线程。 Node.js提供了多种方式来处理异步操作,包括回调函数、Promise、async/await等。这些方式可以根据开发者的需求和个人习惯来选择和使用。 这些异步处理的写法可以帮助开发者更好地处理异步操作,确保代码的高效性和可维护性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [NodeJS -- 异步编程](https://blog.csdn.net/weixin_45933959/article/details/104804110)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [nodejs异步处理](https://blog.csdn.net/weixiao0111/article/details/107390650)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [详解Node.js异步处理的各种写法](https://download.csdn.net/download/weixin_38571759/12940939)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值