Métodos de Tempo
O objeto window oferece dois métodos que permitem atrasar a execução de um bloco de código ou executá-lo repetidas vezes com um intervalo de tempo definido.
setTimeout
O método setTimeout aceita dois argumentos: uma função a ser executada após um determinado tempo e o tempo em milisegundos a esperar.
Esta função passada como argumento é uma função callback, assunto que será visto mais adiante no curso. Basicamente, o que isso significa é que esta função só será invocada quando a função principal terminar de ser executada, ou seja, quando o tempo do método setTimeout terminar.
window.setTimeout(função,tempo em milisegundos)
Vamos soltar duas mensagens do console, com um intervalo de 3 segundos:
console.log("Mensagem 1");
window.setTimeout(function() {
console.log("Mensagem 2");
},3000);
Em outro exemplo, podemos mostrar uma animação de loader por 5 segundos:
document.getElementById("mostrar-loader").onclick = function () {
document.getElementById("spinner-loader").style.display = "initial";
window.setTimeout(function(){
document.getElementById("spinner-loader").style.display = "none";
}, 5000);
};
setInterval
O método SetInterval é parecido com o setTimeout. Ele também aceita os mesmo dois argumentos, a diferença é que ele repete a execução do código indefinidamente, até que ele seja interrompido por outro método.
var count = 0;
window.setInterval(function(){
console.log(count);
count++;
}, 1000);
Interrompendo os métodos de tempo
Tanto o setTimeout quando o setInterval podem ser interrompidos a qualquer momento. Para isso, devemos atribuí-los a uma variável e interrompê-los com os métodos clearTimeout ou clearInterval.
Vamos limitar a execução do código acima a 10 segundos:
var count = 0;
var inter = window.setInterval(function(){
console.log(count);
count++;
if (count > 10) {
window.clearInterval(inter);
}
}, 1000);
Desafio: Relógio
Use os métodos do objeto Date e o método setInterval para fazer o relógio abaixo funcionar em tempo real. O id do elemento é "relogio".