Comment implémenter le chargement séquentiel et l'exécution de méthodes js en javascript

Cet article vous apprend principalement comment charger et exécuter dynamiquement js en javascript dans l'ordre, ainsi que le code d'implémentation. Les amis qui en ont besoin peuvent s'y référer.

Tout d'abord, si vous ne comprenez pas le chargement dynamique JS, vous pouvez vous référer à :

Méthode d'implémentation du chargement dynamique javascript

Trois méthodes de chargement dynamique des fichiers JS

Que faire si votre script n'a pas d'annotations asynchrones, bloquantes, etc. :

Le navigateur chargera le fichier javascript de manière asynchrone, mais il analysera le javascript de haut en bas dans l'ordre de écrire dans le fichier référencé

Balise d'attribut Defer

defer est défini en html4.0. Cet attribut permet au navigateur de retarder l'exécution du script après le document. est analysé, il sera traité dans l'ordre dans lequel il apparaît dans le document. Accédez au téléchargement de l'analyse.

C'est-à-dire que le script avec l'attribut defer a le même effet de chargement que le fait de placer le script dans le corps

Cependant, le degré de prise en charge de l'attribut defer dans chaque navigateur est légèrement différent. , c'est-à-dire que certains navigateurs ne le prennent pas entièrement en charge.

Annotation d'attribut asynchrone

async est un nouvel attribut en HTML5, et la plupart des navigateurs avancés le prennent en charge
Cet attribut La fonction est de permettre aux scripts d'être chargés de manière asynchrone, ce qui signifie que lorsque le navigateur rencontre un script avec l'attribut async, le navigateur charge le CSS de manière asynchrone

javascript charge dynamiquement js files

Le principe est très simple, créez un nœud de script, attribuez l'attribut script au nœud, puis ajoutez-le à la balise head du dom

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

. Si nous chargeons plusieurs fichiers javascript en même temps

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

L'effet ci-dessus est que les fichiers a.js et b.js seront chargés de manière asynchrone en même temps si le fichier b.js est plus petit que. le fichier a.js, il est probable que b.js sera chargé et exécuté en premier, ce qui ne sera pas du tout fait comme écrit. Le résultat est chargé et exécuté

Donc, si votre fichier b.js. dépend de a.js, une erreur sera signalée, car lorsque b.js est interprété et exécuté, a.js est toujours en cours de chargement.

Contrôlez l'ordre d'exécution du chargement de JavaScript

Nous avons apporté les améliorations suivantes au 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);
    }

Utilisez les attributs onload et onreadystatechange sur le nœud de script pour surveiller si le nœud src est chargé

En cas de succès, appelez la fonction de rappel success() ;

Lorsque nous appelons cette méthode, nous pouvons utiliser la fonction de rappel loadJS pour savoir que le nœud actuel a été chargé, puis continuer à charger d'autres fichiers de script dans la fonction de rappel

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

Le chargement via la méthode ci-dessus est un chargement bloquant synchrone. Le fichier b.js sera chargé et exécuté après le chargement de a.js

Si vos fichiers javascript ne dépendent pas les uns des autres, ne le faites pas. utilisez cette méthode.

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment obtenir des effets élastiques en JavaScript

Comment implémenter des cookies inter-domaines dans axios

Comment implémenter la traversée d'arbre binaire à l'aide de JavaScript

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!