JS-Asynchronfunktionswarteschlangenfunktion und zugehörige Betriebsfähigkeiten

Wir alle wissen, dass JS viele Funktionen erreichen kann. In diesem Artikel teilen wir Ihnen mit, wie Sie die asynchrone JS-Funktionswarteschlangenfunktion und die damit verbundenen Betriebsfähigkeiten implementieren.

Szenario:

Bei einer Live-Übertragung gibt es Eintrittsnachrichten und Eintritts-Spezialeffekte. Wenn der Benutzer ein Reittier hat, muss er ihm die Reittier-Spezialeffekte für ein paar Sekunden zeigen . Wenn mehrere Personen gleichzeitig den Veranstaltungsort betreten, wie soll man das zeigen? Zu diesem Zeitpunkt werden Sie an die Funktion setTimeout denken. Ja, die Idee ist gut, aber wie implementiert man die asynchrone Funktionswarteschlange? Geben Sie den Code direkt ein:

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

Beispiel:

Wenn a und b ungefähr zur gleichen Zeit eingehen;
c, wenn a und b nicht eintreffen vollständig aus der Warteschlange entfernt.
d kommt herein, nachdem a, b und c alle aus der Warteschlange entfernt wurden.

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

Hier müssen wir bestimmen, wann Dequeue zum Dequeue aufgerufen werden soll. (Warum muss nicht aus der Warteschlange entfernt werden, wenn c in die Warteschlange eintritt, aber aus der Warteschlange entfernt werden, wenn d eintritt?)

Aber im Allgemeinen können wir nicht wissen, wann der Benutzer die Site betritt, normalerweise sollte er in die Warteschlange eintreten kann aus der Warteschlange entfernt werden, aber wenn der Benutzer hereinkommt, während die Warteschlange leer ist, wurde der vorherige rekursive Aufruf zum Entfernen aus der Warteschlange ausgeführt und Sie müssen ihn erneut ausführen, wenn Sie in die Warteschlange kommen. Vorgänge aus der Warteschlange entfernen.

Der Code sollte also so aussehen:

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

Auf diese Weise wird bei jedem Eintritt in die Warteschlange beurteilt, ob die Warteschlange verlassen werden soll. und alles wird gut.

Der obige Inhalt beschreibt die Implementierung der asynchronen JS-Funktionswarteschlangenfunktion und der zugehörigen Betriebstechniken. Ich hoffe, dass er für alle hilfreich ist.

Verwandte Empfehlungen:

Wie verwende ich asynchrone Funktionen? Zusammenfassung der Verwendung asynchroner Funktionsinstanzen

Detaillierte Erläuterung zum Erhalten des Rückgabewerts einer asynchronen JavaScript-Funktion

So erhalten Sie den Rückgabewert von eine asynchrone JavaScript-Funktion

Das obige ist der detaillierte Inhalt vonJS-Asynchronfunktionswarteschlangenfunktion und zugehörige Betriebsfähigkeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!