Methode zum Ausführen der JS-Rückruffunktion, nachdem das Skript geladen wurde

Dieses Mal zeige ich Ihnen, wie Sie die JSCallback-Funktion ausführen, nachdem das Skript geladen wurde Hinweise zur Ausführung des JS Rückruffunktion nach dem Laden des Skripts. Hier sind die tatsächlichen Fälle.

In Projekten stoßen wir häufig auf dieses Problem: Wenn ein bestimmtes JS-Skript geladen wird, wird die entsprechende Aufgabe ausgeführt, aber viele Freunde wissen möglicherweise nicht, wie sie die JS beurteilen sollen, die wir laden möchten. Ob die Datei geladen wurde. Wenn sie nicht geladen ist, ist der Aufruf der Funktion in der js-Datei nicht erfolgreich. 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 woher wissen wir, dass die Skriptdatei geladen wurde? 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.

Einfaches Beispiel eines dynamischen Skripts

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. Basierend auf diesen beiden einfachen Prinzipien habe ich einige Änderungen vorgenommen, nämlich serielles Laden und paralleles Laden.

Serielle und parallele dynamische Skripte

Wenn ein Array mit mehreren JS-Dateipfaden übergeben wird, beginnt die serielle Ladefunktion mit dem Laden der ersten Skriptdatei und beginnt nach jedem erfolgreichen Laden mit dem Laden der nächsten Skriptdatei. Nachdem alle Ladevorgänge abgeschlossen sind, wird die Rückruffunktion 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.

Anwendung

Hier wird eine Array-Variable deklariert, die zwei Remote-JS-Dateiadressen enthält (natürlich unterstützt das Tag-Aufrufskript <script> 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, ich habe gelesen it Sie beherrschen die Methode im Fall dieses Artikels. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

easyui Datums- und Zeitfeld im Umgang mit Kompatibilität im IE

Wie readline Inhalte Zeile für Zeile liest und schreibt

Das obige ist der detaillierte Inhalt vonMethode zum Ausführen der JS-Rückruffunktion, nachdem das Skript geladen wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!