Fonction de file d'attente de fonctions asynchrones JS et compétences opérationnelles associées

Nous savons tous que JS peut réaliser de nombreuses fonctions.Dans cet article, nous partagerons avec vous comment implémenter la fonction de file d'attente de fonctions asynchrones JS et les compétences opérationnelles associées.

Scénario :

Lors d'une diffusion en direct, il y aura des nouvelles d'admission et des effets spéciaux d'admission. Si l'utilisateur possède une monture, il doit lui montrer les effets spéciaux de la monture pendant quelques secondes. . Si plusieurs personnes entrent dans la salle en même temps, alors comment le montrer ? 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 ? Entrez 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 alors que a et b ne l'ont pas fait ; complètement retiré de la file d'attente, arrive ;
d arrive après que a, b et c soient tous supprimés de la 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 à dequeue. (Pourquoi n'est-il pas nécessaire de retirer la file d'attente lorsque c entre dans la file d'attente, mais la suppression 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 sur le site, généralement il entre dans la file d'attente. capable de sortir de la file d'attente, mais si l'utilisateur arrive alors que la file d'attente est vide, l'appel récursif précédent à sortir de la file d'attente a été exécuté et vous devez l'exécuter à nouveau lorsque vous entrez. Opérations de retrait de la file d'attente.

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 qu'il entre dans la file d'attente, il jugera s'il doit quitter la file d'attente, et tout ira bien.

Le contenu ci-dessus explique comment implémenter la fonction de file d'attente de fonctions asynchrones JS et les techniques de fonctionnement associées. J'espère qu'il sera utile à tout le monde.

Recommandations associées :

Comment utiliser les fonctions asynchrones ? Résumé de l'utilisation des instances de fonction asynchrone

Explication détaillée de l'obtention de la valeur de retour d'une fonction asynchrone JavaScript

Comment obtenir la valeur de retour de une fonction JavaScript asynchrone

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!