JS asynchronous function queue function and related operation skills

We all know that JS can achieve many functions. In this article, we will share with you how to implement the JS asynchronous function queue function and related operating techniques.

Scenario:

During a live broadcast, there will be admission information and admission special effects. If the user has a mount, he needs to be shown the mount special effects for a few seconds. If several people enter the venue at the same time, So how to show it? At this time, you will think of the setTimeout function. Yes, the idea is good, but how to implement the asynchronous function queue? Directly enter 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 about the same time;
c comes in when a and b have not completely left the queue. ;
d comes in after a, b, and c are all removed from the queue.

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

Here we need to determine when to call dequeue to dequeue. (Why is there no need to dequeue when c enters the queue, but dequeue is needed when d enters?)

But generally we cannot know when the user enters the site, usually they enter the queue. It should be able to dequeue, but if the user comes in when the queue is empty, the previous recursive call to dequeue has been executed, and you need to execute it again when you come in. Dequeue operations.

So, the code should be like this:

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

In this way, every time it enters the queue, it will be judged whether to get out of the queue, and things will be OK.

The above content is how to implement the JS asynchronous function queue function and related operation skills. I hope it will be helpful to everyone.

Related recommendations:

How to use asynchronous functions? Summary of usage of asynchronous function instances

Detailed explanation of obtaining the return value of a JavaScript asynchronous function

How to obtain the return value of a JavaScript asynchronous function

The above is the detailed content of JS asynchronous function queue function and related operation skills. For more information, please follow other related articles on the PHP Chinese website!