Beispielanalyse der asynchronen JS-Funktionswarteschlangenfunktion

Synchronisierte Funktionen und asynchrone Funktionen sind ebenfalls Kenntnisse, die wir beherrschen müssen. In diesem Artikel werden hauptsächlich die asynchronen JS-Funktionswarteschlangenfunktionen vorgestellt und die Anwendungsszenarien, Implementierungsmethoden und zugehörigen Betriebstechniken der asynchronen Funktionswarteschlange anhand von Beispielen analysiert. Freunde in Not können darauf verweisen.

Szenario:

Bei einer Live-Übertragung gibt es Eintrittsinformationen und Spezialeffekte. Wenn der Benutzer ein Reittier hat, muss er dies tun Zeigen Sie ihm einige Sekunden lang Zhongs Reittier-Spezialeffekte. Wenn mehrere Personen gleichzeitig die Szene betreten, wie sollen sie angezeigt werden? 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 eintrifft, bevor a und b vollständig aus der Warteschlange entfernt sind; Warteschlange.

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, sondern aus der Warteschlange entfernt werden, wenn d eintrifft?)

Aber im Allgemeinen können wir nicht wissen, wann der Benutzer nach dem Betreten der Warteschlange auftritt Wenn der Benutzer jedoch die Warteschlange leert, wird der vorherige rekursive Aufruf zum Entfernen aus der Warteschlange abgeschlossen und Sie müssen den Vorgang zum Entfernen aus der Warteschlange erneut ausführen.

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, jedes Mal, wenn Sie eintreten In der Warteschlange wird beurteilt, ob es notwendig ist oder nicht, und alles sollte in Ordnung sein.

Verwandte Empfehlungen:

Wie verwende ich asynchrone Funktionen? Fassen Sie die Verwendung asynchroner Funktionsbeispiele zusammen

So erhalten Sie den Rückgabewert der asynchronen JavaScript-Funktion

Sprechen Sie über die Entwicklungsgeschichte der asynchronen JavaScript-Funktion_javascript Fähigkeiten

Das obige ist der detaillierte Inhalt vonBeispielanalyse der asynchronen JS-Funktionswarteschlangenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!