So implementieren Sie die entsprechende Rückruffunktion nach dem Laden mithilfe eines JS-Skripts

In diesem Artikel wird hauptsächlich erläutert, wie die entsprechende Rückrufaufgabe nach dem erfolgreichen Laden der JS-Datei ausgeführt wird. Freunde, die an der Operationsmethode zum Ausführen der entsprechenden Rückruffunktion nach dem Laden des JS-Skripts interessiert sind, können aus diesem Artikel lernen

Oft in Projekten verwendet Sie werden auf ein solches Problem stoßen: Wenn ein js-Skript geladen wird, wird die entsprechende Aufgabe ausgeführt, aber viele Freunde wissen möglicherweise nicht, wie sie beurteilen können, ob die js-Datei, die wir laden möchten, geladen wurde nicht geladen ist, rufen wir die js-Datei auf. Die Funktion wird nicht erfolgreich sein. 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? Weil einige Funktionen aufgerufen werden müssen, nachdem das Skript geladen wurde. 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 beiden 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(&#39;script&#39;);
  s[i].setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
  // Attach handlers for all browsers
  // 异步
  s[i].onload = s[i].onreadystatechange = function() {
   if(!/*@cc_on!@*/0 || this.readyState === &#39;loaded&#39; || this.readyState === &#39;complete&#39;) {
    loaded++;
    this.onload = this.onreadystatechange = null;
    this.parentNode.removeChild(this);
    if(loaded === scripts.length && typeof(callback) === &#39;function&#39;) callback();
   }
  };
  // 同步
  s[i].setAttribute(&#39;src&#39;,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 ist 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 : &#39;<hr>&#39;,
  listDOM : &#39;all&#39;
 });
 */
 console.log(&#39;脚本加载完成啦&#39;);
});

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

Verwandte Artikel:

Detaillierte Erläuterung des Mixins-Attributs von Vue

Instanz des Vue2.0-Simulationsankerpunkts

Vue verwendet Mixins, um komprimierten Bildcode zu implementieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die entsprechende Rückruffunktion nach dem Laden mithilfe eines JS-Skripts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!