logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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".

Índice de Aulas