Maison > Article > interface Web > Erreur courante à éviter lors du chargement synchrone d'un fichier à l'aide d'une balise de script

Erreur courante à éviter lors du chargement synchrone d'un fichier à l'aide d'une balise de script

WBOYoriginal: 2024-07-20 12:44:471089parcourir

Vous pourriez penser que le chargement d'un script de manière synchrone entraînerait l'exécution de la ligne de code suivante après le téléchargement du script, n'est-ce pas ? Mais ce n’est pas ce que signifie le chargement synchrone du fichier javascript. La confusion survient lorsque vous comparez les stratégies asynchrones, synchronisées et différées de chargement d'un fichier particulier.

En savoir plus sur le chargement d'un fichier javascript de manière asynchrone, synchronisée ou différée à la fin de l'article.

Ici, nous parlons d'abord de l'exécution de code. Pour exécuter les lignes de code une fois le téléchargement réussi du script, vous pouvez utiliser l'attribut onload sur la balise de script. Reportez-vous à l'extrait de code ci-dessous :

<html>

<head>
    <title>Sync Script Tag</title>
</head>

<body>
    <h1>Load script sync.</h1>
</body>
<script>
    function  afterLoad() {        
        console.log('script loaded successfully.') // executes after script has loaded   
    }    
    function  sync_load()  {        
        console.log('sync_load...')         
        var  s  =  document.createElement('script');        
        s.type  =  'text/javascript';        
        s.async  =  false; // load synchronously       
        s.onload  =  afterLoad;        
        s.src  =  "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js";        
        var  x  =  document.getElementsByTagName('script')[0];        
        x.parentNode.insertBefore(s,  x);            
    }    
    console.log('JS entry')     
    sync_load();    
    console.log('next tick') // this executes before after_load 
</script>

</html>

Sortie :

Common mistake to avoid while loading a file synchronously using script tag

Maintenant, revenons à la stratégie async vs sync vs defer, veuillez vous référer à l'image ci-dessous via stackoverflow :

Common mistake to avoid while loading a file synchronously using script tag

Dans ce cas, la différence entre async et sync entre en jeu lors de l'analyse du fichier HTML. N'oubliez pas cela !

Bon codage ✨

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!

JavaScript html while using Attribute this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：J'ai besoin d'aideArticle suivant：J'ai besoin d'aide

Articles Liés

Voir plus