Utilizo una función de inclusión para incluir dinámicamente archivos/encabezados/bibliotecas javascript.
El problema es que parece que la carga del archivo se realiza de forma multiproceso (probado en Chrome v102) y el archivo js aún no se carga cuando uso inmediatamente la funcionalidad después de eso.
Ejemplo con jQuery:
<!DOCTYPE html> <html> <head> <meta charset="utf8"/> <script type="text/javascript"> var include_once = function(url) { /* [additional code to check if 'url' was already included] */ var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.head.appendChild(script); } include_once("https://code.jquery.com/jquery-3.6.0.min.js"); </script> </head> <body> <script type="text/javascript"> /* ok if I wait 'long enough' but is arbitrary */ setTimeout(function(){ $(document).ready(function(){ console.log("ready (timeout)"); }); }, 10); /* how to wait until window.$ is defined? */ $(document).ready(function(){ console.log("ready"); }); </script> </body> </html> Es probable que este código le dé un error de $ is not defined y ready (timeout) se registrará en la consola.
¿Cómo puedo hacer que mi script espere hasta window.$ !== undefined aquí?
Probé while(window.$ === undefined) {} pero bloquea completamente el script y $ nunca se define.
puede prometer el proceso de carga creando una promesa en el primer script y luego en el segundo script para verificar si la promesa está resuelta.
<!DOCTYPE html> <html> <head> <meta charset="utf8"/> <script type="text/javascript"> var isLoaded = new Promise((res,rej) => { function include_once(url) { /* [additional code to check if 'url' was already included] */ var script = document.createElement("script"); script.type = "text/javascript"; script.onload = () => res() script.onerror = () => rej() script.src = url; document.head.appendChild(script); } include_once("https://code.jquery.com/jquery-3.6.0.min.js"); }) </script> </head> <body> <script type="text/javascript"> isLoaded.then(() => { $(document).ready(function(){ console.log("ready"); }); }) </script> </body> </html>