JS asynchronous function queue function instance analysis, asynchronous instance analysis

JS asynchronous function queue function instance analysis, asynchronous instance analysis

This article describes the JS asynchronous function queue function. We will share this with you for your reference. The details are as follows:

Scenario:

For live broadcasting, there will be admission messages and special entrance effects. If a user has a mount, he needs to display the Mount effect for several seconds. If a few people come to the site at the same time, how should he display it? At this time, we will think of the setTimeout function, right, the idea is good, but how to implement the asynchronous function queue? Directly run the Code:

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;        }      }    }};

Example:

If a and B come in at the same time;
C comes in when a and B are not completely out of the queue;
D comes in after a, B, and c except the queue.

Var q = new Queue (); function a () {console. log ("a executed", new Date ();} function B () {console. log ("B executed", new Date ();} function c () {console. log ("c executed", new Date ();} function d () {console. log ("d executed", new Date ();} q. wait (2000); q. queue (a); q. wait (2000); q. queue (B); q. dequeue (); setTimeout (function () {// q. wait (2000); q. queue (c) ;}, 3000); setTimeout (function () {// q after 8 s. wait (2000); q. queue (d); q. dequeue (); }, 8000 );

Here we need to determine when to call dequeue to get out of the queue. (Why don't I need dequeue when c enters the queue, But I need dequeue when d comes in ?)

However, we generally cannot know when the user enters the queue. Generally, when the user enters the queue, it should be able to exit the queue. However, if the user comes in when the queue is empty, the previous recursive call to dequeue is complete, and you need to execute the queue operation again when you come in.

Therefore, the code should be as follows:

Var q = new Queue (); function a () {console. log ("a executed", new Date ();} function B () {console. log ("B executed", new Date ();} function c () {console. log ("c executed", new Date ();} function d () {console. log ("d executed", 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 () {// q. wait (2000); q. queue (c); if (! Q. isdequeue) {q. dequeue () ;}}, 3000); setTimeout (function () {// q after 8 s. wait (2000); q. queue (d); if (! Q. isdequeue) {q. dequeue () ;}}, 8000 );

In this way, every time a queue is entered, it is determined whether to leave the queue or not.