La función setInterval con Javascript

Escrito por Juan Felipe Morales Zavala

30 de septiembre de 2019

Hace algunos días necesitaba insertar cierto código javascript en una pagina para lo cual escribí el código en jQuery por que era mas “fácil”, pues resulta que el código que intentaba cargar me marcaba error y que jQuery no era una función así que decidí reescribir lo que hacia hecho pero ahora con vanilla JS, así que tuve que empezar desde 0 ya que yo solo sabia hacer código mediante ese framework, al principio fue un poco confuso, ya que no conocía los selectores, o como tomar o aplicar ciertos estilos o crear un elemento, al final pude reescribir el código en vanilla, pero de nada sirvió ya que no reconocía ninguna funcionalidad a lo que entendí que mi script cargaba demasiado rápido que no le daba tiempo a la pagina de cargar así que un amigo me comento que muchas veces eso pasa no solo trabajando con react si no también con otros lenguajes, y te preguntaras porque no modificarlo directamente desde react cierto?, bueno muchas veces los clientes solo quieren pequeñas modificaciones o simplemente no nos dan acceso al código fuente pero quieren hacer las modificaciones, así que es nuestro trabajo resolver cualquier situación que se nos presente, así que bueno mi amigo me recomendó poner un setInterval.

var reactwait = setInterval(function(){ 
if(document.querySelectorAll("#main").length > 0){
 clearInterval(reactwait);
 miFuncion(); //aqui va nuestra funcion
 }
}, 10);

Pero que es esto? bueno pues básicamente ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.

Así que básicamente tenemos una variable llamada reactwait esperando por el div de react y cuando entra a la función evalúa que el selector main exista, o que su conteo sea mayor a 0 ya que cuando aun no carga la pagina el if es falso hasta que existe el selector sera verdadero o en este caso se cumplirá la condición.

La función clearInterval cancela el temporizador y una vez hecho eso pasa a la siguiente linea de código que mandará a llamar miFuncion para los propositos que necesite.

Una ultima cosa, el 10 que se ve en el ejemplo es para el tiempo que se deberá dejar pasar para volver a ejecutar el setInterval se puede editar para poder hacer el intervalo cada segundo o cada 500 milisegundos o medio segundo.

La función setInterval con Javascript was originally published in 200 Response on Medium, where people are continuing the conversation by highlighting and responding to this story.