Comment implémenter des fonctions asynchrones à l'aide de JS

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 techniques de fonctionnement associées de la file d'attente de fonctions asynchrones sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

. Les exemples de cet article décrivent la fonction de file d'attente de fonctions asynchrones JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Scénario :

En faisant une diffusion en direct, il y aura des informations d'admission , admission effets spéciaux, utilisateurs S'il y a une monture, vous devez lui montrer les effets spéciaux de la monture pendant quelques secondes. 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 ? 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; est toujours dans a et b Il est arrivé alors qu'il n'était pas complètement hors de la file d'attente
d est arrivé après que a, b et c aient tous été 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 à retrait de 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é. 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 ressembler à 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);

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter des onglets interactifs dans zTree

Expliquez en détail l'utilisation des abdominaux dans EasyUI

Problèmes d'optimisation de la vitesse du webpack3 dans vue-cli

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!