Início /Programação /JavaScript /Como usar temporizadores (timers) em JavaScript

Como usar temporizadores (timers) em JavaScript

Por: Angelo Luis Ferreira | 31/05/2019 Acessos: 34.329

Neste tutorial vamos mostrar 3 formas de temporizadores usando JavaScript. Para isto utilizaremos os seguintes métodos JavaScritp: setInterval(),  setTimeout() e setTimeout() recursivo. Os métodos clearInterval() e clearTimeout() interrompem os processos de temporização.

Temporizadores são funções embutidas no JavaScript (built-in timer functions) para chamar funções de retorno após um determinado tempo. Na prática, podemos usar os temporizadores para que um certo algoritmo seja executado em intervalos de tempo ou que um algoritmo espere um determinado tempo para dar algum retorno ao usuário.

Temporizador 1 - Espera um determinado tempo para retornar uma ação

Para este tipo de temporizador utilizamos o método setTimeout() que retorna uma função após um determinado tempo (em milissegundos) e apenas uma única vez. Veja abaixo a sintaxe geral para esta função temporizadora:

setTimeout(function() { definir a função }, tempo em milissegundos);

Podemos também utilizar o método setTimeout() atribuindo ele a uma variável:

var nome_variável = setTimout(nome_função, tempo em milisegundos)

function nome_função() {
  ... definir ação ...
}

Veja os exemplos a seguir:

Exemplo 1 - Sintaxe geral do método setTimeout()

HTML

<body onload='meuRelogio()'>

<p>Aguarde 3 segundos para ver a hora atual.</p>

<h2 id='rel'></h2>

</body>

JavaScript

function meuRelogio() {
  setTimeout(function() {
  		var x = new Date().toLocaleTimeString();
        document.getElementById('rel').innerHTML = x;
  }, 3000);
}

😀 Clique no link a seguir para visualizar o exemplo acima: Squids Editor. Clique no botão [Executar] para reiniciar o código.

Obs.: Observe que definimos 3 segundos (3.000 ms) como intervalo de tempo

Exemplo 2 - Método setTimeout() atribuído a uma variável

HTML

<body>

<p>Aguarde 3 segundos para ver a hora atual.</p>

<h2 id='rel'></h2>

</body>

JavaScript

var temporizador = setTimeout(meuRelogio, 3000);

function meuRelogio() {
	var hora= new Date().toLocaleTimeString();
    document.getElementById('rel').innerHTML = hora;
}

😀 Clique no link a seguir para visualizar o exemplo acima: Squids Editor. Clique no botão [Executar] para reiniciar o código.

Temporizador 2 - Ação executada repetidamente em intervalos de tempo

Para este tipo de temporizador utilizamos o método setInterval() que retorna valores em intervalos de tempo pré-definidos em milissegundos indefinidamente. Veja a seguir a sintaxe geral para esta função:

setInterval(function() { definir a função }, tempo em milissegundos);

Também podemos utilizar a função setInterval() definida em uma variável:

var nome_variável = setInterval(nome_função, tempo em milisegundos)

function nome_função() {
  ... definir ação ...
}

Para interrompermos o processo de repetição podemos utilizar o método clearInterval():

clearInterval(nome_variavel);

Veja os exemplos a seguir:

Exmplo 3 - Sintaxe geral da função setInterval()

HTML

<body onload='meuRelogio()'>

<p>Veja abaixo a hora atual atualizada a cada segundo:</p>

<h2 id='rel'></h2>

JavaScript

function meuRelogio() {
	setInterval (function() {
    	var hora = new Date().toLocaleTimeString();
        document.getElementById('rel').innerHTML = hora;
  	}, 1000);
}

😀 Clique no link a seguir para visualizar o exemplo acima: Squids Editor. Clique no botão [Executar] para reiniciar o código.

Obs.: Observe que definimos 1 segundo (1.000 ms) como intervalo de tempo

Exemplo 4 - Método setInterval() com botões para iniciar e interromper uma ação.

Neste exemplo criamos duas funções para iniciar e interromper o temporizador através dos métodos setInterval() e clearInterval(). Observe que atribuímos o método setInterval() a variável temporizador.

HTML

<p>Clique nos botões abaixo para iniciar ou parar o relógio:</p>

<button onclick="iniciarRelogio()">Iniciar Relógio</button>

<button onclick="pararRelogio()">Parar Relógio</button>

<h2 id='rel'></h2>

JavaScript

var temporizador;

function iniciarRelogio() {
    temporizador = setInterval(meuRelogio, 1000);
}

function meuRelogio() {
    var hora = new Date().toLocaleTimeString();
    document.getElementById('rel').innerHTML = hora;
}

function pararRelogio() {
    clearInterval(temporizador);
}

laughing Clique no link a seguir para visualizar o exemplo acima: Squids Editor. Clique no botão [Executar] para reiniciar o código.

Temporizador 3 - Ação executada repetidamente em intervalos de tempo - método setTimout() com chamada recursiva

Para este tipo de temporizador utilizamos o método setTimeout() que chama uma função recursiva para retornar valores em intervalos de tempo pré-definidos em milissegundos.

Observação: A vantagem de se utilizar a função setTimeout() com chamada recursiva em relação à função setInterval() está na performance da aplicação. Para saber mais sobre as diferenças e as vantagens entre os temporizadores, leia: Javascript - Usando temporizadores like a Ninja

Veja a seguir a sintaxe deste método:

function função_recursiva() {
  ... definir ação recursiva ...
  setTimeout(funcção_recursiva, tempo em milisegundos);
}

Para interrompermos o processo de repetição podemos utilizar a função clearTimeout():

clearTimout(nome_função);

Veja o exemplo a seguir:

Exemplo 5 - Função setTimeout() recursiva com botões para iniciar e interromper uma ação

HTML

<p>Veja abaixo a hora atual atualizada a cada segundo:</p>

<button onclick="meuRelogio()">Iniciar Relógio</button>

<button onclick="pararRelogio()">Parar Relógio</button>

<h2 id='rel'></h2>

 JavaScript

var temporizador;

function meuRelogio() {
	var hora = new Date().toLocaleTimeString();
    document.getElementById('rel').innerHTML = hora;
    temporizador = setTimeout(meuRelogio, 1000);
}

function pararRelogio() {
	clearTimeout(temporizador);
}

😀 Clique no link a seguir para visualizar o exemplo acima: Squids Editor. Clique no botão [Executar] para reiniciar o código.

 REFERÊNCIA JAVASCRIPT

1. [lwindow.setInterval()] >> Sintaxe e exemplos

2. [window.clearInterval()] >> Sintaxe e exemplos

3. [lwindow.setTimeout()] >> Sintaxe e exemplos

4. [lwindow.clearTimeout()] >> Sintaxe e exemplos

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO