So implementieren Sie sequentielles Laden und Ausführen von js-Methoden in Javascript

In diesem Artikel erfahren Sie hauptsächlich, wie Sie js in der Reihenfolge dynamisch laden und ausführen, und Freunde, die es benötigen, können darauf verweisen.

Wenn Sie das dynamische Laden von JS nicht verstehen, können Sie sich zunächst auf Folgendes beziehen:

Implementierungsmethode für das dynamische Laden von Javascript

Drei Methoden zum dynamischen Laden von JS-Dateien

Was passiert, wenn Ihr Skript keine asynchronen, blockierenden usw. Anmerkungen enthält:

Der Browser lädt die Javascript-Datei asynchron, analysiert das Javascript jedoch von oben nach unten in der Reihenfolge Schreiben in die referenzierte Datei

Defer-Attribut-Tag

defer ist in HTML4.0 definiert. Dieses Attribut ermöglicht es dem Browser, die Ausführung des Skripts nach dem Dokument zu verzögern Wenn sie analysiert werden, werden sie in der Reihenfolge verarbeitet, in der sie im Dokument erscheinen. Gehen Sie zur Download-Analyse.

Das heißt, das Skript mit dem Defer-Attribut hat den gleichen Ladeeffekt wie das Platzieren des Skripts im Textkörper.

Der Grad der Unterstützung für das Defer-Attribut ist jedoch in jedem Browser unterschiedlich etwas anders, das heißt, es gibt Browser, die es nicht vollständig unterstützen.

Async-Attributanmerkung

async ist ein neues Attribut in HTML5 und den meisten fortgeschrittenen Browsern unterstützt dieses Attribut.
Dieses Attribut Die Funktion besteht darin, das asynchrone Laden des Skripts zu ermöglichen. Dies bedeutet, dass der Browser das CSS asynchron lädt, wenn der Browser auf ein Skript mit dem asynchronen Attribut stößt

Javascript lädt JS-Dateien dynamisch

Das Prinzip ist sehr einfach: Erstellen Sie einen Skriptknoten, weisen Sie dem Knoten das Skriptattribut zu und hängen Sie es dann an das Head-Tag des Doms an.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

Wenn wir mehrere Javascript-Dateien gleichzeitig laden

loadJS('a.js');
loadJS('b.js');

Der Effekt des oben Gesagten besteht darin, dass die a.js- und b.js-Dateien gleichzeitig asynchron geladen werden kleiner als die a.js-Datei ist, ist es wahrscheinlich, dass b.js zuerst geladen und ausgeführt wird und gemäß dem Schreibergebnis überhaupt nicht geladen und ausgeführt wird

Also, wenn Ihre b.js Datei hängt von a.js ab, es wird ein Fehler gemeldet, denn wenn b.js interpretiert und ausgeführt wird, wird a.js immer noch geladen.

Kontrollieren Sie die Ausführungsreihenfolge beim Laden von Javascript

Wir machen die folgenden Verbesserungen am Code

function loadJS(url, success) {
      var domScript = document.createElement('script');
      domScript.src = url;
      success = success || function () {
          };
      domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
          success();
          this.onload = this.onreadystatechange = null;
          this.parentNode.removeChild(this);
        }
      }
      document.getElementsByTagName('head')[0].appendChild(domScript);
    }

Verwenden Sie die Attribute onload und onreadystatechange auf dem Skriptknoten, um zu überwachen, ob der Knoten src geladen ist

Bei Erfolg rufen Sie die Callback-Funktion success(); auf

Wenn wir diese Methode aufrufen, können wir die LoadJS-Rückruffunktion verwenden, um zu erfahren, dass der aktuelle Knoten geladen wurde, und dann mit dem Laden anderer Skriptdateien in der Rückruffunktion fortfahren

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

Laden über die obige Methode ist ein synchrones blockierendes Laden. Die b.js-Datei wird erst geladen und ausgeführt, nachdem a.js geladen wurde.

Wenn Ihre Javascript-Dateien keine gegenseitigen Abhängigkeiten haben, verwenden Sie diese Methode nicht >Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erzielen Sie elastische Effekte in JavaScript

So implementieren Sie Cookie-domänenübergreifend in Axios

So implementieren Sie die Binärbaum-Traversierung mit JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie sequentielles Laden und Ausführen von js-Methoden in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!