Kiedy wykonywane są funkcje javascript

Question

Myślę, że to musi być łatwe pytanie, ale szukałem w pobliżu i nie znalazłem nigdzie odpowiedzi.

Think jest, że mam stronę HTML z niektórych skryptów (w organizmie) jak ten:

<script type="text/javascript">grf();</script> 

Funkcja GRF() jest zdefiniowana w pliku .js zewnętrznych. Pytanie brzmi: czy ta funkcja jest wykonywana, gdy przeglądarka załaduje stronę I wszystkie jej zewnętrzne pliki js? Lub może być tak, że funkcja jest wykonywana przed załadowaniem plików .js? A jeśli tak, jak mogę temu zapobiec?

Answer 1

Aby sprawdzić, czy funkcja jest zdefiniowana:

// functions are defined or undefined just like regular variables 
function myFunc() { 
    /*--code here--*/ 
} 

// So we just need to see if it's defined 
if(myFunc) { 
    /*--do something here--*/ 
} else { 
    /*--wait, retry or w/e--*/ 
} 

Gdy skrypt zewnętrzny zostanie znaleziony, (x) html nie będą czytać dalej aż skrypt zewnętrzny jest odczytywany (i kod wewnątrz wykonywany jeśli istnieje jakikolwiek kod wykonywalny tam).

Zatem wywołanie funkcji w pliku zewnętrznym po włączeniu pliku zewnętrznego nie może wygenerować błędu, który nie został zdefiniowany. (Należy jednak pamiętać, że wystąpią błędy, jeśli ta zewnętrzna funkcja będzie próbować manipulować DOM lub elementami, które nadal "nie istnieją" na stronie).

Answer 2

Metoda zostanie wykonana, gdy przeglądarka ładuje stronę, gdy dojdzie do końca tego bloku <script>. Jeśli zewnętrzny plik JS znajduje się na stronie poniżej tego miejsca, do którego zostanie wywołana ta metoda, wygeneruje błąd (metoda niezdefiniowana).

Jeśli chcesz poczekać na załadowanie strony i zasobów, najlepiej użyć biblioteki. Korzystanie z wbudowanego sugerowanego zdarzenia onload jest ograniczone, ponieważ obsługuje tylko dodanie jednego programu obsługi (dodanie kolejnego spowoduje zastąpienie poprzedniego). Oto przykład z użyciem jQuery:

<script type="text/javascript"> 
$(document).ready(function() { 
    //code goes here 
    }); 
</script> 

Answer 3

Funkcja jest uruchamiany, gdy spotyka. Jeśli chcesz, aby uruchamiał się po wczytaniu strony, standardową metodą jest zahaczenie zdarzenia onload w oknie. jQuery ma duże poparcie dla tego, ale zacznijmy poziomie gruntu:

<script type="text/javascript">window.onload = function() { grf(); }</script> 

To stomp na innych teleskopowe onload niż mogły zostać przypisane wcześniej na stronie, dlatego większość ludzi używa jQuery który jest ostrożny do łańcucha do poprzednich teleskopowe:

<script type="text/javascript">$(document).ready(function() { grf(); });</script> 

oczywiście na tym drugim przykładzie, trzeba zawierać biblioteki jQuery dalej na stronie (co brzmi jak nie jesteś w stanie zrobić).

Answer 4

Przeglądarka wykonuje ją, gdy widzi znacznik. Nie można jeszcze załadować innych skryptów, DOM może nie zostać skonstruowany. Jednak gwarantuje się, że skrypty są wykonywane w kolejności, w jakiej pojawiają się w kodzie HTML.

Jeśli możesz użyć jQuery, ma funkcję $ .ready(), która wywołuje oddzwanianie, gdy DOM jest gotowy, więc wszystkie skrypty są już załadowane. Można go używać podobnie jak w przypadku często używanych funkcji anonimowych.

Answer 5

Najlepszym sposobem na uniknięcie problemów ze skryptami jest użycie biblioteki JavaScript, takiej jak jQuery, Mootools itp., Które ułatwiają powiązanie dowolnego kodu z różnymi zdarzeniami (dom.ready itp.), Aby upewnić się, że wszystko zostało wczytane w pełni wcześniej .

Answer 6

Dopóki plik skryptu zostanie uwzględniony powyżej użycia funkcji, funkcja będzie dostępna. Przeglądarka zatrzyma renderowanie po napotkaniu znacznika . Ponownie wznowi przetwarzanie strony dokumentu po pobraniu i przeanalizowaniu skryptu.Więc każda funkcja określona w skrypcie będą dostępne zaraz po:

<script src="..."></script> <!-- Browser waits until this script is loaded --> 
<script> 
    foo(); // if function foo was in the script above, it is ALWAYS available now 
</script> 

To rzeczywiście nie zawsze jest pożądane zachowanie - czasami nie chcą czekać na skrypcie ściągnąć, ponieważ może to uczynić kod wydaje się powolny . Jedną z technik jest załadowanie i wykonanie wszystkich skryptów na dole strony przed </body>, gdy cały kod HTML jest już renderowany.