Cuándo se ejecutan las funciones de Javascript

Question

Creo que tiene que ser una pregunta fácil pero he estado buscando y no he encontrado la respuesta en ningún lado.

El pienso es que tengo una página html con algunas secuencias de comandos (en el cuerpo) como éste:

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

La función GRF() se define en un archivo .js externo. La pregunta es: ¿se ejecuta esta función una vez que el navegador ha cargado la página Y todos sus archivos js externos? ¿O puede ser el caso de que la función se ejecute antes de que se carguen los archivos .js? Y si es así, ¿cómo puedo evitar esto?

Answer 1

para ver si una función se define:

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

Cuando se encuentra un script externo, el (x) html no se leerá más hasta que el script externo se lee (y código dentro ejecutados si hay alguna código ejecutable allí).

Por lo tanto, llamar a una función en un archivo externo después de que el archivo externo fue 'incluido' no puede generar un error de función no definida. (Sin embargo, tenga en cuenta que obtendrá errores si esa función externa intenta manipular el DOM o elementos que todavía "no existen" en la página.)

Answer 2

El método se ejecutará cuando el navegador esté cargando la página, cuando llegue al final de ese bloque <script>. Si el archivo JS externo está incluido en la página más abajo que donde se llama a este método, arrojará un error (método no definido).

Si desea esperar hasta que se carguen la página y los elementos, lo mejor es usar una biblioteca. El uso del evento incorporado onload sugerido es limitado, ya que solo admite la adición de un controlador (agregar otro sobrescribirá el anterior). Aquí hay un ejemplo usando jQuery:

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

Answer 3

La función se ejecuta cuando se encuentra. Si desea que se ejecute después de que la página se haya cargado, el método estándar es enganchar el evento onload de la ventana. jQuery tiene un gran apoyo para esto, pero vamos a empezar con una sola planta:

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

Esto pisar sobre cualesquiera otros manipuladores onload que pueden haber sido asignados previamente en la página, por lo que la mayoría de la gente usa jQuery, que tiene cuidado para encadenar a los controladores anteriores:

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

por supuesto, para este segundo ejemplo, es necesario incluir las bibliotecas de jQuery más arriba en la página (que suena como usted no está en condiciones de hacerlo).

Answer 4

El navegador lo ejecuta cuando ve la etiqueta. No es posible que aún no se hayan cargado otras secuencias de comandos, DOM podría no estar construido. Sin embargo, se garantiza que los scripts se ejecuten para que aparezcan en el HTML.

Si puede usar jQuery, tiene la función $ .ready(), que llama a la devolución de llamada cuando DOM está listo, por lo que todos los scripts ya están cargados. Úselo como

$.ready(grf); 

o con la función anónima como se usa comúnmente.

Answer 5

La mejor manera de evitar problemas con las secuencias de comandos es utilizar una biblioteca de JavaScript como jQuery, Mootools, etc. que hacen que sea fácil vincular cualquier código a varios eventos (dom.ready, etc.) para asegurarse de que todo esté cargado completamente de antemano .

Answer 6

Mientras el archivo de script esté incluido encima del uso de la función, la función estará disponible. El navegador detendrá el procesamiento cuando encuentre una etiqueta

<script src="..."></script> 

. Solo reanudará el procesamiento de la página del documento cuando se descargue y analice la secuencia de comandos.Por lo que cualquier función definida en el guión estará disponible inmediatamente después:

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

Esto es en realidad no es siempre un comportamiento deseado - a veces usted no desea esperar a que una secuencia de comandos para descargar, ya que puede hacer que el código parece lenta . Una técnica es que todos los scripts se carguen y ejecuten en la parte inferior de la página antes del </body>, cuando ya se haya procesado todo el HTML.