Como atualizar automaticamente a página da web a cada 5 segundos usando JavaScript

No JavaScript, há situações em que precisamos garantir que o conteúdo inserido em um site específico seja preciso e atualizado. Por exemplo, é necessário exibir o conteúdo mais recente em uma página da web enquanto preenche um formulário longo e observa as novas alterações ou quando você deseja testar um site. Nesses casos, a refrescamento automático de uma página da web a cada 5 segundos usando JavaScript é muito útil para lidar com esses tipos de situações.

Este artigo discutirá os métodos para atualizar automaticamente uma página da web a cada 5 segundos usando JavaScript.

Como atualizar automaticamente a página da web a cada 5 segundos usando JavaScript?

Para atualizar automaticamente uma página da web a cada 5 segundos usando JavaScript, as seguintes abordagens podem ser utilizadas:

• ““setInterval ()" e "documento.QuerySelector ()" métodos
• ““Refresh ()”Método
• ““setTimeout ()”Método

Passar pelos métodos discutidos um por um!

Método 1: página da web de atualização automática a cada 5 segundos em javascript usando setInterval () e documento.Métodos de querySelector ()

O "setInterval ()”Método acessa uma função no intervalo de tempo especificado e o“documento.QuerySelector ()”O método recebe o primeiro elemento que corresponde a um seletor CSS. Esses métodos podem ser usados ​​em combinação para acessar a tag de cabeçalho específica e definir o intervalo de tempo para uma funcionalidade necessária com a ajuda de um cronômetro.

Sintaxe

setInterval (função, milissegundos, par1, par2)

Na sintaxe acima, “função”Refere -se à função que precisa ser acessada,“milissegundos”É o intervalo de tempo específico para executar e“PAR1" e "PAR2”São os parâmetros adicionais.

documento.QuerySelector (seletores CSS)

Aqui, "Seletores CSS”Representam um ou mais de um seletores CSS.

Confira o seguinte exemplo.

Exemplo

Primeiro, especifique um título e um título no e

Tags, respectivamente:

Atualizar a página automática

Agora, defina um valor do timer como “1”:

Deixe o timer = 1;

Depois disso, aplique o “setInterval ()”Método com um“1000ms" valor. Isso aumentará o timer a cada segundo. Além disso, acesse o cabeçalho especificado para exibi -lo no “Modelo de objeto de documento (DOM)”No final do valor do timer definido.

Finalmente, itera o valor do cronômetro com o incremento de “1" usando "++Operador pós-incremento e aplique uma condição de tal maneira que, se o valor exceder 5, o “localização.recarregar()”O método resultará na recarga da janela:

setInterval (() =>
documento.QuerySelector ('H2').inerText = Timer;
Timer ++;
IF (Timer> 5)
localização.recarregar();
, 1000);

Pode -se observar que nossa página da web recebe atualização automática a cada cinco segundos:

Método 2: página da web de atualização automática a cada 5 segundos em JavaScript usando o evento OnLoad

O "carregando”O evento é acionado quando um objeto foi carregado. Esta técnica pode ser implementada para atualizar a página com a ajuda de uma função definida pelo usuário quando a página da web é carregada.

Sintaxe

objeto.onLload = refreshPage () myscript;

Na sintaxe dada, “função”Refere -se à função que precisa ser invocada quando o objeto é carregado.

Veja o exemplo a seguir.

Exemplo

Em primeiro lugar, inclua um título e cabeçalho, conforme discutido no método anterior:

Atualizar a página automática

Agora, aplique o “carregando”Evento e invocar a função“atualizar a página()”E Passe“5000”Como argumento que indica intervalo de tempo de cinco segundos:

Por fim, defina uma função chamada “atualizar a página()" com "t”Como um argumento que se refere ao tempo definido para refrescar automaticamente a página da web. O "localização.recarregar()”O método recarregará a página após o horário especificado:

função refreshpage (t)
setTimeout ("Localização.recarregar (verdadeiro); ", t);

Saída

Método 3: página da web de atualização automática a cada 5 segundos no JavaScript usando o método setTimeout ()

O "setTimeout ()”O método chama uma função após um tempo de configuração especificado. Este método pode ser aplicado para recarregar uma página da web após um tempo limite específico.

Sintaxe

setTimeout (função, milissegundos, par1, par2)

Na sintaxe dada, “função”Refere -se à função a ser acessada,“milissegundos”É o intervalo de tempo específico para executar e“PAR1","PAR2”São os parâmetros adicionais.

Exemplo

Na etiqueta do script da página HTML, aplique o “setTimeout ()”Método de tal maneira quando 5 segundos são passados, o local.Reload () Método Recarregue a página da web:

Saída

Discutimos todos os métodos convenientes para atualizar automaticamente uma página da web a cada 5 segundos usando JavaScript.

Conclusão

Para atualizar automaticamente uma página da web a cada 5 segundos usando JavaScript, utilize o “setInterval ()" e "documento.QuerySelector ()”Métodos para ajustar o valor do timer, o“Refresh ()”Método para atualizar uma página da web ou o“setTimeout ()”Método para definir um limite específico de atualização de tempo limite de uma página da web. Este artigo demonstrou os métodos para atualizar automaticamente uma página da web a cada 5 segundos usando JavaScript.