3

Cómo puedo ASEGURARME de que el

return called

Será ejecutado REALMENTE después de que se haya verificado si el DOM cargo ?, esto vendrá con función asincrona supongo, pero cómo debe hacerse en este caso ?

El return de charged() debería esperar con await al listener ? O es de otra forma ?

Mi problema real, más que centrarse en el caso particular , me refiero a cómo asegurarme que realmente se ejecutará una función x , antes que una funcion y, cuál es el método común más simple para hacer esto ?

function charged() {
     window.addEventListener("DOMContentLoaded", devolverValor);
      var called = false;
      function devolverValor() {
       called = true;
      }
      return called;
    }
    console.log(charged());
5
  • todo depende de en que momento ejecutas charged(), si lo haces después de que el DOM se cargó entonces no va a ejecutar devolverValor() porque el evento DOMContentLoaded ya ocurrió.
    – derloopkat
    Commented el 30 dic. 2017 a las 22:39
  • Entonces, que debo hacer ? y como puedo asegurarme
    – ESCM
    Commented el 30 dic. 2017 a las 22:58
  • yo normalmente uso jQuery $(document).ready(); pero si buscas un equivalente en Javasript mira esto stackoverflow.com/questions/799981/…
    – derloopkat
    Commented el 30 dic. 2017 a las 23:13
  • Tú me estás respondiendo con "Haz esto , tan pronto como el DOM cargue" y esa no es mi pregunta, para eso usaría el listener directo
    – ESCM
    Commented el 31 dic. 2017 a las 0:55
  • 1
    La página la cargar el navegador, no nuestro código. Por eso no podemos hacer await loadPage();
    – derloopkat
    Commented el 31 dic. 2017 a las 9:23

2 respuestas 2

1

Ya que el proceso de que el DOM y tu pagina esten listos (es decir que se ha cargado tu pagina totalmente) es controlado por 2 tipos de event listeners los cuales son DOMContentLoaded y load, no necesitas una funcion sincrona sino una callback directamente.

La diferencia fundamental esta en, cuándo lo quieres?

Para esto debes entender los 2 tipos de event listeners que notifican este estado

DOMContentLoaded

Este evento se lanza cuando el HTML que se envío del servidor ha sido totalmente procesado por el navegador, es decir que se ha construido el DOM, nada más!

Este evento no espera imagenes ni estilos por ser descargados.

load

Por otro lado este el evento load será lanzado cuando el html enviado por el servidor y sus dependencias (estilos, fuentes, imagenes externos) hayan sido procesados y descargados.

Lo puedes notar en la tab de tu actual ventana del navegador cuando el spinner haya terminado


Implementación

Con load listener:

  function charged(event) {
    console.log("Toda la pagina ha sido cargada!");
  }

  window.addEventListener("load", charged);



Con DOMContentLoaded listener:

  function charged(event) {
    console.log("Solo el DOM esta listo!");
  }

  window.addEventListener("DOMContentLoaded", charged);
0

Te recomendaría usar la función de Jquery .ready(). lo que haces es englobar con esta función las demás funciones javascript que necesitas se ejecuten justo despues de la carga completa del DOM. De la forma siguiente lo logras:

$(document).ready(function(){

function hola() {

    alert 'hola';

}

Menos recomendable pero sigue siendo solución es que con javascript "puro" coloques la función de la siguiente manera en tu body:

<body onload="hola()">

De esta forma también logras que la función "charged" se ejecute justo después de la carga total de la página.

Eso es todo. Un saludo!

4
  • Agradezco tu respuesta, pero esto no tiene sentido ( porque estas colocando el mismo listener 2 veces ) , pero lo principal es que este enfoque no es de mi pregunta, tu me respondes "Haz esto, tan pronto como el DOM carge , con jquery simplemente" , pero yo quiero hacer en cualquier momento.
    – ESCM
    Commented el 31 dic. 2017 a las 1:35
  • Lee nuevamente. Justo actualice mi respuesta porque me di cuenta. Lo mejor es que en vez de tu función charge() utilices el estándar de jquery .ready() o en el peor de los casos el onload dentro de la etiqueta body ambos funcionan perfectamente para lo que pides. Lee mi respuesta. El hola se cargará despues que toda la página se cargue (o lo que es lo mismo que este todo el DOM cargado)
    – Eztronics
    Commented el 31 dic. 2017 a las 1:38
  • 1
    @Huskie, en el document ready lo que debe ir es la llamada a la función. La definición puede incluso ir afuera.
    – derloopkat
    Commented el 31 dic. 2017 a las 13:10
  • @derloopkat es cierto gracias por la acotación. Lo coloco así porque la mayoría de los ejemplos en internet están igual como para no romper el "esquema" de ejemplos y cuando el dueño de la pregunta busque otras refenrencias en internet se familiarice más rapido con el código
    – Eztronics
    Commented el 31 dic. 2017 a las 13:50

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.