JavaScript: Quand JavaScript évalue-t-il une fonction, un chargement ou quand la fonction est appelée?

Quand JavaScript évalue-t-il une fonction? Est-ce sur le chargement de la page ou lorsque la fonction est appelée?JavaScript: Quand JavaScript évalue-t-il une fonction, un chargement ou quand la fonction est appelée?

La raison pour laquelle je demande est parce que j'ai le code suivant:

function scriptLoaded() { 
    // one of our scripts finished loading, detect which scripts are available: 
    var jQuery = window.jQuery; 
    var maps = window.google && google.maps; 

    if (maps && !requiresGmaps.called) { 
    requiresGmaps.called = true; 
    requiresGmaps(); 
    } 
    if (jQuery && !requiresJQuery.called) { 
    requiresJQuery.called = true; 
    requiresJQuery(); 
    } 
    if (maps && jQuery && !requiresBothJQueryGmaps.called) { 
    requiresBothJQueryGmaps.called = true; 
    requiresBothJQueryGmaps(); 
    } 
} 
// asynch download of script 
function addScript(url) { 
    var script = document.createElement('script'); 
    script.src = url; 
    // older IE... 
    script.onreadystatechange=function() { 
     if (this.readyState == 'complete') scriptLoaded.call(this); 
    } 
    script.onload=scriptLoaded; 

    document.getElementsByTagName('head')[0].appendChild(script); 
} 

addScript('http://google.com/gmaps.js'); 
addScript('http://jquery.com/jquery.js'); 

// define some function dependecies 
function requiresJQuery() { // create JQuery objects } 
function requiresGmaps() { // create Google Maps object, etc } 
function requiresBothJQueryGmaps() { ... }

Ce que je veux faire est de réaliser asynchrone téléchargement de mon JavaScript et commencer le plus tôt possible de commencer l'exécution de ces scripts mais mon code a des dépendances quand les scripts ont été téléchargés et chargés. Lorsque j'essaie le code ci-dessus, il semble que mon navigateur essaie toujours d'évaluer le code dans mes fonctions require* avant même que ces fonctions aient été appelées. Est-ce correct? Ou suis-je mal comprendre ce qui ne va pas avec mon code?

Source

2010-05-11 Benj

Cette question est pertinente seulement si vous avez décidé de mettre votre JavaScript dans un fichier externe à partir de votre balisage. Si vous manquez de sagesse, alors vous devriez vous attendre à l'incertitude et au chaos. –

Les fonctions sont évaluées lorsqu'elles sont appelées.

Par exemple

function test() { 
    window.foo = 'bar'; 
} 

console.log(window.foo); // => undefined 
test(); 
console.log(window.foo); // => bar

Même si test a été créé avant la première console.log, window.foo n'est pas peuplée que test est effectivement appelé.

Si vos requires* fonctions sont suspendues/blocage, alors vous devez montrer le code pour ceux (pourquoi ne pas fournir la source pour les problématiques?)

Modifier:

Actuellement, votre site est blanking sur moi lorsque vous attachez le <script> chargé au <head>.

De toute façon, une solution rapide serait de placer les scripts que vous voulez au bas de la page, avant </body>, car seuls les scripts <head> bloqueront complètement la page pendant le chargement.

Il y a des façons élégantes aux ressources en fin de charge, mais pour faire simple ..

<script type="text/javascript" src="http://path/to/jquery.js"></script> 
<script type="text/javascript"> 
requiresJQuery(); // jQuery is available at this point 
</script> 
</body>

Le point est que, puisque le <script> est placé après vos principaux éléments, les éléments DOM seront disponible (et potentiellement chargé) avant que le navigateur commence à télécharger vos autres bibliothèques.

Source

2010-05-11 16:24:15 Matt

@Matt, j'ai lié au site en direct dans le message original maintenant. Voir mise à jour. – Benj

@Matt, aussi - Je cherche essentiellement des moyens de rendre mon site web plus rapide et un gros que j'ai remarqué est que JS bloque. Vous pouvez voir mon site en direct à /.Ce que j'essaye de faire avec la page html liée est de retravailler ma page d'accueil pour supprimer le blocage JS hérité pour effectuer un traitement JS plus tôt si possible (si cela a du sens) – Benj

@Benj voir ma mise à jour – Matt

Oui, vous êtes probablement mal compris. Même si vos fonctions contiennent une erreur de syntaxe, cela ne devrait pas avoir d'importance tant que vous n'appelez pas la fonction.

Se pourrait-il que vous appeliez ces fonctions d'ailleurs? Peut-être que vous n'avez pas fourni d'échantillons de code précis?

Source

2010-05-11 16:26:44

J'ai lié au site en direct dans le message original maintenant. Voir mise à jour. – Benj

Je ne vois pas de lien vers le site d'origine. L'avez-vous déjà retiré? –

JavaScript: Quand JavaScript évalue-t-il une fonction, un chargement ou quand la fonction est appelée?

Répondre

Questions connexes