Ho una tale struttura:Come caricare 2 file Javascript asincroni ed eseguirne uno dopo l'altro?
<script src="/Content/Scripts/1.js"></script>
<script async src="/Content/Scripts/2.js"></script>
ho bisogno di caricare entrambi i file asincrona ed eseguire 2.js file dopo 1.js. Come potrei farlo?
Se aggiungo async a 2.js, verranno eseguiti a caso.
È possibile aggiungere in modo dinamico gli script, in questo modo vengono caricati in modo asincrono per impostazione predefinita.
Per garantire un'esecuzione ordinata, è possibile contrassegnarli esplicitamente come non asincroni.
Ecco un esempio minimo:
1.js<html>
<head>
<script>
[
'http://code.jquery.com/jquery-1.11.3.min.js',
'1.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
</script>
</head>
<body>
</body>
</html>
Il file contiene codice jQuery:
$("body").append("<div>It works</div>");
In questo esempio i file vengono caricati in modo asincrono, ma mantengono l'ordine specificato. Per ulteriori informazioni è possibile dare un'occhiata a: http://www.html5rocks.com/en/tutorials/speed/script-loading/
Gli script asincroni regolari non supportano l'ordinamento del carico. BTW, ES2015 e soprattutto hanno la import sintassi di file di script per asincrono a vuoto in ordine:
import x from "x.js";
import y from "y.js";
Oppure si può anche utilizzare l'API di programmazione:
Promise.all([System.import("x.js"), System.import("y.js")]).then(() => {
// Do stuff once they've been already loaded...
});
Se si desidera utilizzare queste funzionalità di oggi, si dovrebbe dare un'occhiata a:
Ho intenzione di andare con la soluzione di copia-incolla, ma questa è una bella risposta! – Rolf
Un approccio sarebbe quello di caricare il primo file (1.js) in modo asincrono e quindi aggiungere dinamicamente il secondo script come menzionato nell'altra risposta, facendolo diventare caricare in modo asincrono.
carico primo file:
<script async src="/Content/Scripts/1.js"></script>
Poi nel primo file, sono i seguenti in fondo,
var script = document.createElement('script');
script.src = "/Content/Scripts/2.js";
script.async = true;
document.head.appendChild(script);
Spero che questo aiuti :)
Aggiungi 'async' per entrambi e chiama '2.js' dopo' 1.js' – Carpetfizz
=) Certo, l'ho già fatto. Non funziona. – thedriveee
Questo potrebbe aiutare: https://stackoverflow.com/questions/34076200/check-when-async-javascript-file-is-loaded?rq=1 – Shanoor