So implementieren Sie asynchrone Funktionen mit JS

In diesem Artikel wird hauptsächlich die asynchrone JS-Funktionswarteschlange vorgestellt und die Anwendungsszenarien, Implementierungsmethoden und zugehörigen Betriebstechniken der asynchronen Funktionswarteschlange anhand von Beispielen analysiert

Die Beispiele in diesem Artikel beschreiben die Warteschlangenfunktion der asynchronen JS-Funktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Szenario:

Bei einer Live-Übertragung werden Informationen zum Eintritt gegeben , Eintritt Spezialeffekte, Benutzer Wenn ein Reittier vorhanden ist, müssen Sie ihm einige Sekunden lang die Spezialeffekte des Reittiers zeigen. Wenn mehrere Personen gleichzeitig die Szene betreten, wie sollen diese 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 nicht abgeschlossen, bevor a und b beim Verlassen der Warteschlange eingehen.
d kommt ein, 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, 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 betritt 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);

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie interaktive Tabs in zTree

Erklären Sie ausführlich die Verwendung von Bauchmuskeln in EasyUI

Probleme im Zusammenhang mit der Webpack3-Geschwindigkeitsoptimierung in vue-cli

Das obige ist der detaillierte Inhalt vonSo implementieren Sie asynchrone Funktionen mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!