I el atributo defer de la etiqueta del script en la sección <head> de los archivos HTML. Esto casi siempre significa que no puedo ejecutar funciones js en el HTML ya que el archivo js solo se carga después de que se haya cargado el archivo HTML.
Me encontré con una situación en la que necesitaba ejecutar una función js en mi archivo HTML, pero no quería eliminar el atributo diferido de la etiqueta del script debido a otras funciones en el archivo js. Miré la posibilidad de usar async , pero tampoco fue útil.
¿Alguna idea de cómo se podría hacer esto... además de usar diferir? Todavía me gustaría mantener la etiqueta del script en la head , pero hacerlo de esa manera significaría que no tengo instrucciones abiertas (no basadas en funciones) en el archivo js vinculado... lo cual no siempre es ideal.
Aquí hay una muestra del archivo HTML
temp.html
<!DOCTYPE html> <html lang="en"> <head> <script src="temp.js" defer></script> <title>Defer et al</title> </head> <body> <script> runThisFunction('Home'); </script> </body> </html>Y aquí hay una muestra del archivo js
temp.js
function runThisFunction(varin) { console.log(varin); }Si elimino el aplazamiento del archivo js, la función se ejecutará; si lo dejo allí, o uso async en su lugar, la función no se ejecutará porque aún no se ha cargado.
Cualquier ayuda en este pequeño problema será apreciada.
La mejor manera de hacer esto sería refactorizar su secuencia de comandos para que contenga un punto de entrada en una función y ejecutar esa función una vez que se carga el DOM. En lugar de, por ejemplo
// temp.js function runThisFunction(varin) { console.log(varin); } document.querySelector('.foo').textContent = 'doing stuff'; // other code hereponer toda la funcionalidad que depende de la página que se está cargando en su propia función:
// temp.js function runThisFunction(varin) { console.log(varin); } function init() { document.querySelector('.foo').textContent = 'doing stuff'; // other code here } window.addEventListener('DOMContentLoaded', init); De esta manera, si también elimina el atributo runThisFunction defer disponible de inmediato, pero las otras partes de su código no se ejecutarán hasta que se cargue la página.