Recursos de Temporização no Javascript

Publicação: 15/01/2019
Área:Desenvolvimento Web e Mobile

Recursos de Temporização no Javascript

Imagine que você quer que algo aconteça após um certo tempo, ou que uma função seja repetida de tantos em tantos segundos? É o tipo de recurso que você precisa se quer, por exemplo, implementar um relógio ou contador em uma página web.

No site da Alfamídia, temos sequências de imagens com divulgações de novidades e artigos, nas quais o usuário pode navegar clicando em setas nos dois cantos. Porém, se passar alguns segundos sem o usuário interagir, uma função javascript altera para a imagem seguinte na sequência. Novamente um uso dos recursos de temporização do javascript.


Existem dois métodos principais do objeto Window, no Javascript, para tratar a temporização:


setTimeout

O Método setTimeout chama uma função passada como parâmetro após um determinado tempo, definido em milisegundos.

Por exemplo, "setTimeout(function() { alert("Ola mundo");} , 5000)" é um comando que irá executar a função definida dentro do parâmetro após 5000 milisegundos, ou seja, após 5 segundos.

O método setTimeout executa uma única vez. Assim, no exemplo acima, a mensagem "Ola Mundo" será executada uma única vez, 5 segundos após o método setTimeout ser executado.

setTimeout permite também definirmos um loop, infinito ou que se encerre após alguma condição. Para tanto, basta que um novo setTimeout seja executado na própria função chamada.

Observe este código, semelhante ao anterior. Há apenas duas diferentes, uma que simplesmente escrevemos a função fora da chamada do setTimeout, e a outra que acrescentamos na função um novo comando de setTimeout.

----------------------------------
function ola_eterno() {
alert("ola mundo");
setTimeout(ola_eterno,3000);
}
ola_eterno();
----------------------------------


O que este código faz é definir uma função chamada ola_eterno(), que, além de exibir a mensagem ola_mundo, define um comando que faz com que a função seja chamada novamente em 3 segundos.




setInterval

setInterval também é um método que irá chamar a função especificada no parâmetro, porém a diferença é que ele fará a chamada repetidas vezes, em intervalos definidos no segundo parâmetro.

Para obtermos um efeito parecido com o de nosso exemplo acima, por exemplo, podemos simplesmente escrever:

----------------------------------
function ola() {
alert("ola mundo");
}
setInterval(ola,3000);
----------------------------------

Observe que ao invés de utilizarmos uma chamada a um novo setTimeout dentro da função, isso não é necessário. Apenas especificar o setInterval já cria uma repetição da chamada da função a cada 3 segundos.

Entretanto, o setInterval torna necessária a definição de outro método, se quisermos interromper nosso loop. Isso não é necessário em setTimeout, pois basta não chamarmos novamente o método para não seguirmos para mais um ciclo de execução.

O método para interromper um loop criado em um setInterval é o clearInterval, que deve receber o parâmetro de identificação do temporizador criado no setInterval.

por exemplo, se fizermos um comando do tipo "temporizador = setInterval(ola,3000);", precisamos em algum momento executar "clearInterval(temporizador)" para iterromper o ciclo de chamadas a função "ola".



Exemplo de uso do temporizador do Javascript

Confira a seguir um dos vídeos de nosso curso Programação em 5 minutos em que mostramos na prática um exemplo do uso de setInterval.