Wann werden JavaScript-Funktionen ausgeführt

Question

Ich denke, es muss eine einfache Frage sein, aber ich habe gesucht und habe die Antwort nirgendwo gefunden.

Die denken, ist, dass ich eine HTML-Seite mit einigen Skripten haben (im Körper) wie diese:

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

GRF() Funktion in einer externen JS-Datei definiert ist. Die Frage ist: Wird diese Funktion ausgeführt, nachdem der Browser die Seite AND alle externen js-Dateien geladen hat? Oder kann es sein, dass die Funktion ausgeführt wird, bevor die .js-Dateien geladen werden? Und wenn ja, wie kann ich das verhindern?

Answer 1

Um zu sehen, ob eine Funktion definiert:

// 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--*/ 
} 

Wenn ein externes Skript gefunden wird, wird die (x) html nicht weiter das externe Script, bis gelesen wird gelesen (und Code innerhalb ausgeführt, wenn eine da ist ausführbarer Code dort).

Wenn Sie also eine Funktion in einer externen Datei aufrufen, nachdem die externe Datei "eingeschlossen" wurde, kann kein funktionsdefinierter Fehler generiert werden. (Beachten Sie jedoch, dass Sie Fehler erhalten, wenn diese externe Funktion versucht, das DOM oder Elemente zu manipulieren, die auf der Seite noch nicht vorhanden sind.)

Answer 2

Die Methode wird ausgeführt, wenn der Browser die Seite lädt, wenn sie das Ende dieses <script> Blocks erreicht. Wenn die externe JS-Datei in der weiter unten liegenden Seite enthalten ist als dort, wo diese Methode aufgerufen wird, wird ein Fehler ausgelöst (Methode nicht definiert).

Wenn Sie warten möchten, bis die Seite und die Assets geladen wurden, empfiehlt es sich, eine Bibliothek zu verwenden. Die Verwendung des integrierten onload-Ereignisses ist begrenzt, da es nur das Hinzufügen eines Handlers unterstützt (das Hinzufügen eines anderen wird den vorherigen überschreiben). Hier ist ein Beispiel unter Verwendung von jQuery:

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

Answer 3

Die Funktion wird ausgeführt, wenn es auftritt. Wenn sie nach dem Laden der Seite ausgeführt werden soll, besteht die Standardmethode darin, das Onload-Ereignis des Fensters anzuhängen. jQuery hat große Unterstützung für diese, aber fangen wir mit ebenerdiger beginnen:

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

Diese auf anderen onload-Handler stampfen wird als auf der Seite zuvor zugewiesen worden sein, weshalb die meisten Menschen jQuery verwenden, die vorsichtig Ketten zum vorherigen Handler:

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

natürlich für dieses zweite Beispiel, müssen Sie die jQuery Bibliotheken weiter oben auf der Seite schließen (was es klingt wie Sie nicht in der Lage zu tun sind).

Answer 4

Browser führt es aus, wenn es das Tag sieht. Nicht nur andere Skripte sind möglicherweise noch nicht geladen, DOM wird möglicherweise nicht erstellt. Es ist jedoch garantiert, dass Skripte in der Reihenfolge ausgeführt werden, in der sie im HTML erscheinen.

Wenn Sie jQuery verwenden können, hat es die Funktion $ .ready(), die den Rückruf aufruft, wenn DOM bereit ist und alle Skripte bereits geladen sind. Verwenden Sie es wie

$.ready(grf); 

oder mit anonymer Funktion, wie es häufig verwendet wird.

Answer 5

Die beste Möglichkeit, Probleme mit Skripten zu vermeiden, ist die Verwendung einer JavaScript-Bibliothek wie jQuery, Mootools usw., die es einfach macht, Code an verschiedene Ereignisse (dom.ready etc.) zu binden, um sicherzustellen, dass alles vollständig geladen ist .

Answer 6

Solange die Skriptdatei oberhalb der Funktionsverwendung enthalten ist, ist die Funktion verfügbar. Der Browser stoppt das Rendern, wenn er auf eine Markierung trifft. Die Verarbeitung der Dokumentseite wird erst fortgesetzt, wenn das Skript heruntergeladen und analysiert wurde.So eine beliebige Funktion im Skript definiert wird verfügbar sein Recht nach:

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

Dies ist eigentlich nicht immer das gewünschte Verhalten - manchmal möchte man nicht für ein Skript warten, herunterladen, wie es Ihren Code langsam scheinen machen kann . Eine Technik besteht darin, dass alle Skripte am Ende der Seite vor </body> geladen und ausgeführt werden, wenn der gesamte HTML-Code bereits gerendert ist.