Kesilapan biasa yang perlu dielakkan semasa memuatkan fail secara serentak menggunakan tag skrip-tutorial js-php.cn

Kesilapan biasa yang perlu dielakkan semasa memuatkan fail secara serentak menggunakan tag skrip

WBOY

Lepaskan： 2024-07-20 12:44:47

asal

1185 orang telah melayarinya

Anda mungkin berfikir bahawa memuatkan skrip secara serentak akan menjadikan baris kod seterusnya dilaksanakan selepas skrip dimuat turun, bukan? Tetapi itu bukan maksud memuatkan segerak fail javascript. Kekeliruan timbul apabila anda membandingkan strategi async vs sync vs tangguh untuk memuatkan fail tertentu.

Lebih lanjut tentang memuatkan fail javascript dalam cara async vs sync vs defer pada penghujung siaran.

Di sini kita mula-mula bercakap tentang pelaksanaan kod w.r.t. Untuk melaksanakan baris kod selepas skrip berjaya dimuat turun, anda boleh menggunakan atribut onload pada teg skrip. Rujuk coretan kod di bawah:

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

Salin selepas log masuk

Output:

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

Sekarang, kembali kepada strategi async vs sync vs defer, sila rujuk imej di bawah melalui stackoverflow:

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

Dalam kes ini, perbezaan antara async vs sync akan dimainkan semasa menghurai fail HTML. Ingat itu!

Selamat mengekod ✨

Atas ialah kandungan terperinci Kesilapan biasa yang perlu dielakkan semasa memuatkan fail secara serentak menggunakan tag skrip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!