Une fois le script JS chargé, la fonction de rappel correspondante est exécutée.

Cette fois, je vais vous présenter l'opération de chargement du script JS puis d'exécution de la fonction de rappel correspondante. Quelles sont les précautions pour charger le script JS puis exécuter le correspondant. fonction de rappel ? Voici quelques cas pratiques.

Nous rencontrons souvent ce problème dans les projets : lorsqu'un script js est chargé, la tâche correspondante sera exécutée. Cependant, de nombreux amis peuvent ne pas savoir comment juger si le fichier js que nous voulons charger est chargé. non, une fois le chargement terminé, nous ne réussirons pas si nous appelons la fonction dans le fichier js. Cet article explique principalement comment exécuter la tâche de rappel correspondante après avoir chargé avec succès le fichier js.

Idée de base

On peut créer dynamiquement l'élément <script> puis charger le script en changeant son attribut src, mais comment faire tu sais ? Le fichier de script a-t-il été chargé ? Parce que certaines fonctions doivent être chargées avant que le script puisse être appelé. Vous pouvez utiliser le <script> de l'élément onreadystatechange dans le navigateur IE pour surveiller les changements d'état de chargement et déterminer si le script est chargé en déterminant si son état prêt est chargé ou terminé. Les navigateurs non-IE peuvent utiliser onload pour déterminer directement si le script est chargé.

Un exemple simple de script dynamique

Un processus de mise en œuvre simple est le suivant :

// 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)

Le principe est très simple, selon ces Deux principes simples, on fait quelques modifications, je les ai changés en deux fonctions, à savoir le chargement en série et le chargement en parallèle.

Scripts dynamiques série et parallèle

Lors du passage d'un tableau contenant plusieurs chemins de fichiers JS, la fonction de chargement en série démarre à partir du premier Le chargement de Les fichiers de script démarrent. Chaque fois qu'un fichier est chargé avec succès, le fichier de script suivant commence à être chargé une fois le chargement terminé, la fonction de rappel est exécutée. Le chargement parallèle charge tous les fichiers de script depuis le début, c'est-à-dire qu'ils commencent à se charger au même point. Lorsque tout le chargement est terminé, la fonction de rappel est exécutée.

/** 
 * 串行加载指定的脚本
 * 串行加载[异步]逐个加载，每个加载完成后加载下一个
 * 全部加载完成后执行回调
 * @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]);
 }
}

Ici, la balise <script> est insérée dynamiquement dans la page à l'intérieur de la balise <head> , et l'élément de balise sera automatiquement supprimé une fois le chargement terminé.

Utilisation

Une variable tableau est déclarée ici, qui contient deux adresses de fichiers JS distants (bien sûr la balise <script> appelle Le script prend en charge plusieurs domaines) :

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('脚本加载完成啦');
});

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. à d'autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Comment fonctionne le chargeur de module javascript ?

Comment implémenter l'actualisation de force arrière sur le Web WeChat côté

Comment utiliser le framework React BootStrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!