2012-04-12 11 views
8

Estoy tratando de resolver un problema con algún código que heredé.Interacción entre jQuery .Ready() y <script defer>

tengo una página HTML con

<script type="text/javascript" src="file1.js" defer="defer"></script> 
<script type="text/javascript" src="file2.js" defer="defer"></script> 
</body> 
</html> 

file1.js ha

FOO = { 
    init : function() { 
    var bar = BAR; 
    } 
} 

$(document).ready(FOO.init); 

file2.js ha

var BAR = { 
} 

Debido al atributo de retrasar de los elementos, es que Es seguro suponer que cuando el .ready() llama al FOO.init() puede BAR aún no se ha definido en ese punto b/c el código en file2.js no se ha ejecutado todavía debido a la ejecución diferida?

Esto coincidiría con un error que estoy tratando de rastrear (solo ocurre esporádicamente en IE), pero realmente quiero entender por qué esto está sucediendo antes de trabajar en una solución. No tengo idea de por qué el desarrollador original usó defer, aparte de un comentario críptico sobre "tenía que" hacerlo de esta manera.

+0

No tengo una respuesta, pero lo siento por ti, hombre. –

+0

¿Entiende el atributo 'defer'? Porque me parece que es algo muy común de hacer ... –

+0

Supongo que el desarrollador original quería que se cargara otro script antes de file1.js y file2.js (o él no sabía acerca de $ (document) .ready () ...) – jbl

Respuesta

2

Defer debe hacer que la secuencia de comandos se agregue a una cola que se procesa una vez que la página está completamente cargada. De acuerdo con la especificación, los guiones diferidos se deben agregar a la cola en el orden en que ingresaron a la página.

Sin embargo, diferentes navegadores han hecho cosas ligeramente diferentes con la orden. IE parece ejecutar diferir las secuencias de comandos en el orden en que terminaron de cargar en lugar del orden en que ocurrieron en la página. Entonces ves el error esporádicamente porque a veces los carga en el orden correcto y otras no.

Consulte this post en hacks.mozilla.com para obtener una explicación más exhaustiva y ejemplos de cómo los diferentes navegadores manejan el pedido de la cola de aplazamiento.

0

Deffering en javascript da preferencia al navegador de cuándo interpretar el script, en algunas condiciones óptimas, como con chrome, el script se descarga mientras se carga, se analiza e interpreta la página. Si utiliza el aplazamiento como el anterior, nunca podrá estar seguro de qué script se carga primero o cuándo se completa la interpretación.

BAR podría estar indefinido en la carga de una página y se puede definir en la recarga (en caché) o el segundo script se cargó primero.

Para probar esto intente hacer un cambio en uno de los scripts para forzar una nueva descarga e interpretación y ver qué condiciones existen.

Cuestiones relacionadas