Dokument JavaScript.napisz Inline script Execution Order

Nie, to jest zachowanie Internet Explorera.

Jeśli dołączasz Skrypty dynamicznie, IE, Firefox i Chrome będą pobierać skrypty w sposób asynchroniczny.

Firefox i Chrome poczekają, aż wszystkie żądania asynchroniczne powrócą, a następnie wykonają skrypty w kolejności, w jakiej są dołączone do DOM, ale IE wykonuje skrypty w kolejności, w jakiej są zwracane przez przewód.

Ponieważ alert zajmuje mniej czasu na "odzyskanie" niż zewnętrzny plik javascript, który prawdopodobnie wyjaśnia zachowanie, które widzisz.

Z postu Kristoffera Henrikssona na temat asynchronicznego ładowania skryptu :

W tym scenariuszu IE i Firefox będą Pobierz oba Skrypty, ale Internet Explorer wykona je również w zamów Zakończ pobieranie w natomiast Firefox pobiera je asynchronicznie, ale nadal wykonuje je w kolejności, w jakiej są dołączone w DOM.

W Internecie Explorer oznacza to, że Twój skrypty nie mogą zależeć od siebie jako nakaz egzekucji będzie się różnić w zależności od sieci korki, pamięci podręczne itp.

Rozważ użycie loadera Javascript. Pozwoli Ci określić zależności skryptów i kolejność wykonywania, a także ładować Skrypty asynchronicznie pod kątem szybkości, a także wygładzić niektóre różnice w przeglądarce.

To jest całkiem dobry przegląd kilku z nich: Essential JavaScript: the top five script loaders .

Używałem zarówno RequireJS jak i LabJS. Moim zdaniem LabJS jest trochę mniej opiniotwórczy.

Slajdy 25/26 z ta prezentacja mówi o cechach różnych metod wstawiania skryptów. Sugeruje to, że IE jest jedyną przeglądarką, która będzie wykonywać te skrypty w kolejności. Wszystkie inne przeglądarki wykonają je w kolejności, w której zakończą Ładowanie. Nawet IE nie uruchomi ich w kolejności, jeśli jeden lub więcej ma wbudowane js zamiast src.

Jedną z proponowanych metod jest wstawienie nowego elementu DOM:

var se1 = document.createElement('script');
se1.src = 'a.js';

var se2 = document.createElement('script');
se2.src = 'b.js';

var se3 = document.createElement('script');
se3.src = 'c.js';

var head = document.getElementsByTagName('head')[0]
head.appendChild(se1);
head.appendChild(se2);
head.appendChild(se3);

Aby zrobić drugą sekcję skryptu wygenerowany możesz użyć skryptu do wygenerowania tej treści i przekazać parametry:

se2.src = 'generateScript.php?params=' + someParam;

EDIT: pomimo tego, co napisał artykuł, moje testy sugerują, że większość przeglądarek uruchomi twój dokument.pisz skrypty w kolejności, jeśli każdy z nich ma src, więc chociaż myślę, że metoda powyżej jest preferowana, możesz to zrobić również:

<script language="javascript" type="text/javascript">
document.write("<script type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

Edytuj ponownie (odpowiedź na komentarze do siebie i innych): już generujesz skrypt na swojej stronie. Cokolwiek robisz może być przeniesiony na inny skrypt po stronie serwera, który generuje ten sam blok kodu. Jeśli potrzebujesz parametrów na swojej stronie, przekaż je do skryptu w ciągu zapytania.

Możesz również użyć tej samej metody, jeśli, jak sugerujesz, generujesz skrypt inline wiele razy:

<script language="javascript" type="text/javascript">
document.write("<script type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params1 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params2 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params3 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

Jednak zaczyna to wyglądać tak, jakbyś podchodził do tego w złą stronę. Jeśli generujesz duży blok kodu wiele razy, prawdopodobnie powinieneś zastąpić go pojedynczym funkcja js i wywołanie go z różnych params zamiast...

Ok...podczas...

// During.js
during[fish]();

// After.js
alert("After");
fish++

HTML

<!-- some html -->
<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript'>during[" + fish + "] = function(){alert('During!' + fish);}</sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='during.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'></sc" + "ript>");
</script>
<!-- some other html -->
<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript'>during[" + fish + "] = function(){alert('During!' + fish);}</sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='during.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'></sc" + "ript>");
</script>

Zauważ, że dynamicznie generowany skrypt trafia do funkcji w drugim dokumencie.pisz.
Testowane w FF2, IE7

Możesz wymusić wykonanie secuential przez zdefiniowanie zdarzeń" onload " (lub podobnych) w skryptach i wstrzyknięcie następnego w funkcji event. To nie jest trywialne, ale jest wiele przykładów, tutaj jest jeden.

Http://www.phpied.com/javascript-include-ready-onload/

Myślę, że popularne biblioteki jak jQuery lub prototype mogą w tym pomóc.

Kod do podania:

<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript'>function callGeneratedContent() { alert('during'); }<\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
</script>

W przed.js:

alert("Before");
callGeneratedContent();

Po.js:

alert("After");

Musisz najpierw wstawić wygenerowaną linię, w przeciwnym razie FF będzie narzekał, ponieważ wykonuje wcześniej.js przed zobaczeniem definicji funkcji.

Co ty na to:

<script>
document.write("<script src='before.js'><\/script>");
</script>

<script >
document.write("<script>alert('during');<\/script>");
</script>

<script>
document.write("<script src='after.js'><\/script>");
</script>