JS asynchronous function queue function example analysis-JS Tutorial-php.cn

JS asynchronous function queue function example analysis

小云云

Release： 2017-12-07 15:47:48

Original

1582 people have browsed it

Synchronous functions and asynchronous functions are also knowledge we need to master and learn. 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 Down.

Scenario:

When doing a live broadcast, there will be admission information and admission special effects. If the user has a mount, he needs to be shown it for a few seconds. Zhong's mount special effects, 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;
        }
      }
    }
};

Copy after login

## Example:

If a, b came in at about the same time;

c came in before a, b were completely out of the queue;
d came in after a, b, and c were 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);

Copy after login

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

Copy after login

In this way, every time you enter the queue, you will determine whether to leave the queue. , things are OK.

Related recommendations:

How to use asynchronous functions? Summarize the usage of asynchronous function examples

How to obtain the return value of JavaScript asynchronous function

Talk about the development history of JavaScript asynchronous function_javascript skills

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