Exemple d'analyse de la fonction de file d'attente de fonctions asynchrones JS

Les fonctions synchrones et les fonctions asynchrones sont également des connaissances que nous devons maîtriser.Cet article présente principalement la fonction de file d'attente de fonctions asynchrones JS et analyse les scénarios d'application, les méthodes de mise en œuvre et les compétences opérationnelles associées de la file d'attente de fonctions asynchrones sous forme d'exemples. Les amis dans le besoin peuvent se référer à Down.

Scène :

Lors d'une diffusion en direct, il y aura des informations d'admission et des effets spéciaux. Si l'utilisateur a une monture, il en a besoin. pour lui montrer pendant quelques secondes les effets spéciaux de la monture de Zhong, si plusieurs personnes entrent en scène en même temps, comment doivent-ils être affichés ? A ce moment, vous penserez à la fonction setTimeout Oui, l'idée est bonne, mais comment implémenter la file d'attente de fonctions asynchrones ? Saisissez directement le 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;
        }
      }
    }
};

Exemple :

Si a et b arrivent à peu près en même temps ;
c arrive avant que a et b ne soient complètement hors de la file d'attente
d arrive après que a, b et c aient tous été supprimés de la file d'attente ; file d'attente.

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

Ici, nous devons déterminer quand appeler dequeue pour sortir de la file d'attente. (Pourquoi n'est-il pas nécessaire de sortir de la file d'attente lorsque c entre dans la file d'attente, mais la sortie de la file d'attente est nécessaire lorsque d entre ? )

Mais en général, nous ne pouvons pas savoir quand l'utilisateur entre dans la file d'attente. Après être entrés dans la file d'attente, ils devraient pouvoir sortir de la file d'attente. Cependant, si l'utilisateur entre lorsque la file d'attente est vide, l'appel récursif précédent à la sortie de la file d'attente sera terminé et vous devrez effectuer à nouveau l'opération de sortie de la file d'attente lorsque vous entrez.

Donc, le code devrait être comme ceci :

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

De cette façon, chaque fois que vous entrez la file d'attente, il sera jugé si cela est nécessaire ou non et tout devrait bien se passer.

Recommandations associées :

Comment utiliser les fonctions asynchrones ? Résumer l'utilisation d'exemples de fonctions asynchrones

Comment obtenir la valeur de retour de la fonction asynchrone JavaScript

Parler de l'historique de développement de la fonction asynchrone JavaScript_javascript compétences

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!