Nachdem das JS-Skript geladen ist, wird die entsprechende Callback-Funktion ausgeführt.

Dieses Mal werde ich Ihnen den Vorgang des Ladens des JS-Skripts und der anschließenden Ausführung der entsprechenden Rückruffunktion vorstellen. Welche Vorsichtsmaßnahmen gibt es zum Laden des JS-Skripts und zur anschließenden Ausführung der entsprechenden Funktion? Rückruffunktion? Das Folgende ist: Werfen wir einen Blick auf praktische Fälle.

In Projekten stoßen wir häufig auf dieses Problem: Wenn ein JS-Skript geladen wird, wird die entsprechende Aufgabe ausgeführt. Viele Freunde wissen jedoch möglicherweise nicht, wie sie beurteilen können, ob die JS-Datei, die wir laden möchten, geladen wird , Nachdem der Ladevorgang abgeschlossen ist, wird es uns nicht gelingen, wenn wir die Funktion in der js-Datei aufrufen. In diesem Artikel wird hauptsächlich erläutert, wie die entsprechende Rückrufaufgabe ausgeführt wird, nachdem die js-Datei erfolgreich geladen wurde.

Grundidee

Wir können das <script>-Element dynamisch erstellen und dann das Skript laden, indem wir sein src-Attribut ändern, aber wie machen wir das? Wissen Sie? Wurde die Skriptdatei geladen? Denn einige Funktionen müssen geladen werden, bevor das Skript aufgerufen werden kann. Sie können das <script> des onreadystatechange-Elements im IE-Browser verwenden, um Änderungen im Ladestatus zu überwachen und festzustellen, ob das Skript geladen ist, indem Sie bestimmen, ob sein readyState geladen oder abgeschlossen ist. Nicht-IE-Browser können mit onload direkt ermitteln, ob das Skript geladen ist.

Ein einfaches Beispiel für ein dynamisches Skript

Ein einfacher Implementierungsprozess ist wie folgt:

// IE下：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onreadystatechange = function() {
 if(this.readyState === 'loaded' || this.readyState === 'complete') {
  console.log('加载成功！')
 }
}
script.setAttribute('src', src)
HEAD.appendChild(script)
// Chrome等现代浏览器：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onload = function() {
 console.log('加载成功!')
}
script.setAttribute('src', src)
HEAD.appendChild(script)

Das Prinzip ist Sehr einfach, nach diesen zwei einfachen Prinzipien nehmen wir einige Änderungen vor, ich habe sie in zwei Funktionen geändert, nämlich serielles Laden und paralleles Laden.

Serielle und parallele dynamische Skripte

Beim Übergeben eines Arrays mit mehreren JS-Dateipfaden beginnt die serielle Ladefunktion mit dem ersten Das Laden von Jedes Mal, wenn eine Skriptdatei erfolgreich geladen wird, wird die nächste Skriptdatei geladen. Nachdem der gesamte Ladevorgang abgeschlossen ist, wird die Callback-Funktion ausgeführt. Beim parallelen Laden werden alle Skriptdateien von Anfang an geladen, d. h. sie beginnen am selben Punkt zu laden. Wenn der gesamte Ladevorgang abgeschlossen ist, wird die Rückruffunktion ausgeführt.

/** 
 * 串行加载指定的脚本
 * 串行加载[异步]逐个加载，每个加载完成后加载下一个
 * 全部加载完成后执行回调
 * @param {Array|String} scripts 指定要加载的脚本
 * @param {Function} callback 成功后回调的函数
 * @return {Array} 所有生成的脚本元素对象数组
 */
function seriesLoadScripts(scripts, callback) {
 if(typeof(scripts) !== 'object') {
  var scripts = [scripts];
 }
 var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
 var s = [];
 var last = scripts.length - 1;
 //递归
 var recursiveLoad = function(i) {
  s[i] = document.createElement('script');
  s[i].setAttribute('type','text/javascript');
  // Attach handlers for all browsers
  // 异步
  s[i].onload = s[i].onreadystatechange = function() {
   if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
    this.onload = this.onreadystatechange = null; 
    this.parentNode.removeChild(this);
    if(i !== last) {
     recursiveLoad(i + 1);
    } else if (typeof(callback) === 'function') {
     callback()
    };
   }
  }
  // 同步
  s[i].setAttribute('src', scripts[i]);
  HEAD.appendChild(s[i]);
 };
 recursiveLoad(0);
}
/**
 * 并行加载指定的脚本
 * 并行加载[同步]同时加载，不管上个是否加载完成，直接加载全部
 * 全部加载完成后执行回调
 * @param {Array|String} scripts 指定要加载的脚本
 * @param {Function} callback 成功后回调的函数
 * @return {Array} 所有生成的脚本元素对象数组
 */ 
function parallelLoadScripts(scripts, callback) {
 if(typeof(scripts) !== 'object') {
  var scripts = [scripts];
 }
 var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
 var s = [];
 var loaded = 0;
 for(var i = 0; i < scripts.length; i++) {
  s[i] = document.createElement('script');
  s[i].setAttribute('type','text/javascript');
  // Attach handlers for all browsers
  // 异步
  s[i].onload = s[i].onreadystatechange = function() {
   if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
    loaded++;
    this.onload = this.onreadystatechange = null;
    this.parentNode.removeChild(this);
    if(loaded === scripts.length && typeof(callback) === 'function') callback();
   }
  };
  // 同步
  s[i].setAttribute('src',scripts[i]);
  HEAD.appendChild(s[i]);
 }
}

Hier wird das <script> -Tag dynamisch in die Seite innerhalb des <head> -Tags eingefügt und das Tag-Element wird nach Abschluss des Ladevorgangs automatisch entfernt.

Verwendung

Hier wird eine Array-Variable deklariert, die zwei Remote-JS-Dateiadressen enthält (natürlich das <script>-Tag-Aufruf-Skript). unterstützt domänenübergreifend):

var scripts = [ 
 "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
 "http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];
// 这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
// 然后你可以使用下面的方法调用并在成功后执行回调了。
parallelLoadScripts(scripts, function() { 
 /*
 debug = new $.debug({ 
  posTo : { x:'right', y:'bottom' },
  width: '480px',
  height: '50%',
  itempider : '<hr>',
  listDOM : 'all'
 });
 */
 console.log('脚本加载完成啦');
});

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie Zu anderen verwandten Themen finden Sie den Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie läuft der Javascript-Modul-Loader?

So implementieren Sie eine Back-Force-Aktualisierung im WeChat-Web Seite

So verwenden Sie das React BootStrap-Framework

Das obige ist der detaillierte Inhalt vonNachdem das JS-Skript geladen ist, wird die entsprechende Callback-Funktion ausgeführt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!