Cómo actualizar automáticamente la página web cada 5 segundos usando JavaScript

En JavaScript, hay situaciones en las que necesitamos asegurarnos de que el contenido ingresado en un sitio en particular sea preciso y actualizado. Por ejemplo, se requiere mostrar el contenido más reciente en una página web mientras llena un formulario largo y observa los nuevos cambios o cuando desea probar un sitio web. En tales casos, la refrigeración automática de una página web cada 5 segundos usando JavaScript es muy útil para hacer frente a este tipo de situaciones.

Este artículo discutirá los métodos para actualizar automáticamente una página web cada 5 segundos usando JavaScript.

Cómo actualizar automáticamente la página web cada 5 segundos usando JavaScript?

Para actualizar automáticamente una página web cada 5 segundos usando JavaScript, se pueden utilizar los siguientes enfoques:

• "setInterval ()" y "documento.QuerySelector ()" métodos
• "actualizar()" método
• "setTimeout ()" método

Pasar por los métodos discutidos uno por uno!

Método 1: Página web de actualización automática cada 5 segundos en JavaScript usando setinterval () y documento.Métodos de QuerySelector ()

El "setInterval ()"El método accede a una función en un intervalo de tiempo especificado y el"documento.QuerySelector ()El método "obtiene el primer elemento que coincide con un selector CSS. Estos métodos se pueden usar en combinación para acceder a la etiqueta de encabezado específica y establecer el intervalo de tiempo en una funcionalidad requerida con la ayuda de un temporizador.

Sintaxis

SetInterval (función, milisegundos, par1, par2)

En la sintaxis anterior, "función"Se refiere a la función a la que se debe acceder", "milisegundos"Es el intervalo de tiempo específico para ejecutar, y"par1" y "par2"Son los parámetros adicionales.

documento.QuerySelector (selectores CSS)

Aquí, "Selectores CSS"Representar uno o más de un selectores CSS.

Mira el siguiente ejemplo.

Ejemplo

Primero, especifique un título y un encabezado en el y

Etiquetas, respectivamente:

Actualizar automáticamente la página

Ahora, establezca un valor de temporizador como "1":

Sea temporizador = 1;

Después de eso, aplique el "setInterval ()"Método con un"1000 ms" valor. Esto incrementará el temporizador cada segundo. Además, acceda al encabezado especificado para mostrarlo en el "Modelo de objetos de documento (DOM)"Al final del valor del temporizador establecido.

Finalmente, itere el valor del temporizador con el incremento de "1" usando "++"Operador posterior al incremento y aplique una condición de tal manera que si el valor excede 5, el"ubicación.recargar()El método "dará como resultado la recarga de la ventana:

setInterval (() =>
documento.QuerySelector ('H2').inntext = temporizador;
temporizador ++;
if (temporizador> 5)
ubicación.recargar();
, 1000);

Se puede ver que nuestra página web obtiene actualización automática cada cinco segundos:

Método 2: Página web de actualización automática cada 5 segundos en JavaScript usando el evento Onload

El "encendido"El evento se activa cuando se ha cargado un objeto. Esta técnica se puede implementar para actualizar la página con la ayuda de una función definida por el usuario cuando se carga la página web.

Sintaxis

objeto.onload = refreshPage () myScript;

En la sintaxis dada, "función"Se refiere a la función que debe invocarse cuando el objeto está cargado.

Mira el siguiente ejemplo.

Ejemplo

En primer lugar, incluya un título y encabezado como se discute en el método anterior:

Actualizar automáticamente la página

Ahora, aplique el "encendido"Evento e invoca la función"actualizar página()"Y pasar"5000"Como argumento que indica un intervalo de tiempo de cinco segundos:

Por último, defina una función llamada "actualizar página()" con "T"Como un argumento que se refiere al tiempo establecido para actualizar automáticamente la página web. El "ubicación.recargar()El método ”volverá a cargar la página después del tiempo especificado:

función refreshPage (t)
setTimeOut ("Ubicación.recargar (verdadero); ", t);

Producción

Método 3: Página web de actualización automática cada 5 segundos en JavaScript usando el método setTimeOut ()

El "setTimeout ()El método "invoca una función después de un tiempo establecido especificado. Este método se puede aplicar para recargar una página web después de un tiempo de espera establecido específico.

Sintaxis

setTimeOut (función, milisegundos, par1, par2)

En la sintaxis dada, "función"Se refiere a la función a acceder,"milisegundos"Es el intervalo de tiempo específico para ejecutar, y"par1","par2"Son los parámetros adicionales.

Ejemplo

En la etiqueta de script de la página HTML, aplique el "setTimeout ()"Método de tal manera cuando pasan 5 segundos, la ubicación.El método recoad () recarga la página web:

Producción

Hemos discutido todos los métodos convenientes para actualizar automáticamente una página web cada 5 segundos usando JavaScript.

Conclusión

Para actualizar automáticamente una página web cada 5 segundos con JavaScript, utilice el "setInterval ()" y "documento.QuerySelector ()"Métodos para ajustar el valor del temporizador, el"actualizar()"Método para actualizar una página web, o el"setTimeout ()Método para establecer un límite específico de actualización de tiempo de espera de una página web. Este artículo demostró los métodos para actualizar automáticamente una página web cada 5 segundos usando JavaScript.