0

llevo horas buscando sobre el tema y no he tenido éxito así que me mando acá a dejar mi pregunta y pedido de ayuda.

Contexto: Tengo una librería js que funciona como la función include() de php. El funcionamiento es el siguiente: Cada elemento (div) que tenga un data attribute "data-include" (cuyo valor es el nombre del archivo por ejemplo header.html) lo reemplaza por el contenido de dicho archivo. Ej: <div data-include="header.html"></div>. La librería funciona perfecto, la tengo asignada al "DOMContentLoaded" es decir, a la carga del DOM. Y funciona bien.

El problema es que tengo otro script, que despliega el menú de la versión móvil, que utiliza elementos del DOM del archivo header.html para funcionar, y cuando quiero abrir el menú usando el botón me dice en consola que hay un "Reference Error" porque la variable que estoy llamando no está declarada.

Es decir, necesito la forma de que el segundo script se ejecute únicamente cuando el primero (el include) haya acabado, y no antes. Probé dándole un setTimeOut al segundo script pero aunque le de 10 segundos de todos modos no funciona como quiero.

Incluso intenté con una callback pero tampoco ha funcionado.

1 respuesta 1

0

Finalmente pude resolverlo, y quiero compartir la solución para que le sirva a alguien que tenga una inquietud similar, y también porque me interesa si algún usuario más avanzado me puede brindar alguna alternativa un poco más "elegante".

He usado un ejemplo, en este caso hay dos funciones, una que crea un elemento y lo muestra en el DOM y otra que lo manipula. Si ejecutamos una abajo de la otra el error es que la segunda función no puede "capturar" el elemento creado, ya que se ejecutan al mismo tiempo.

En contexto "real" no tiene sentido ya que sería más fácil hacer ambas cosas en una sola función y no tendríamos el problema planteado. Entonces el contexto en el cual esta solución sirve, es cuando por alguna razón generamos dinámicamente los elementos en el DOM, y mediante otra función queremos hacer algo con estos, ya sea modificar su estilo, agregar un evento, o lo que fuera.

//El setTimeout está a propósito, con el fin de simular la demora de la función de ejemplo.
const addElement = (callback) => {
  setTimeout(() => {
    const $h1 = document.createElement("h1");
    $h1.innerText = "Título";
    document.body.appendChild($h1);
    callback();
  }, 2000)
}

const addStyle = () => {
  $title = document.querySelector("h1");
  $title.style.color = "white";
  $title.style.backgroundColor = "blue";
}

addElement(addStyle);

He aquí una alternativa que me ha funcionado tambien, un poco más engorroso pero efectiva.

//Creo una variable que podré manipular  cuando la primera función se haya ejecutado.
let ready = false;

//Creo la primera función, al terminar todas las instrucciones modifico a "true" el valor de la variable que creé anteriormente.
//El setTimeout es para simular la demora de la ejecución de esta función
const addElement = () =>{
  setTimeout(()=>{
    const $h1 = document.createElement("h1");
    $h1.innerText = "Título";
    document.body.appendChild($h1);
    ready = true; //Modifico el valor de la variable
  },2000)
}

//Creo la segunda función
const addStyle = () =>{
  $title = document.querySelector("h1");
  $title.style.color = "white";
  $title.style.backgroundColor = "blue";
}

//Ejecuto la primer función
addElement();

//Creo un setInterval, el cual evaluará en cada vuelta el estado de la variable "ready", cuando esta sea true (Es decir, cuando la primera función haya acabado) iniciará la segunda función y finalmente terminamos el bucle con clearInterval()
const timer = setInterval(()=>{
  if (ready == true) {
    addStyle();
    clearInterval(timer);
  }
},500)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.