How to implement asynchronous functions using JS

This article mainly introduces the JS asynchronous function queue function, and analyzes the application scenarios, implementation methods and related operating techniques of the asynchronous function queue in the form of examples. Friends in need can refer to the following

The examples in this article describe JS asynchronous function queue function. Share it with everyone for your reference, the details are as follows:

Scenario:

Doing a live broadcast, there will be admission information, admission special effects, users If there is a mount, you need to show him the mount's special effects for a few seconds. If several people enter the scene at the same time, how should they be displayed? 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 is not complete before a and b When leaving the queue, it comes in;
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 comes in? )

But generally we cannot know when the user enters the site. Generally, After entering the queue, they should be able to dequeue. However, if the user comes in when the queue is empty, the previous recursive call to dequeue will be completed, and you need to perform the dequeue operation again when you come in.

So, the code should look 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);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement interactive tabs in zTree

Explain in detail the use of abs in EasyUI

Issues related to webpack3 speed optimization in vue-cli

The above is the detailed content of How to implement asynchronous functions using JS. For more information, please follow other related articles on the PHP Chinese website!