Descomplicando as funções setTimeout e setInterval no Javascript

CursoPHP Moderno: Criando uma aplicação com área administrativa

O Javascript contém muitas funções que podem ser utilizadas para a manipulação de tempo, dentre elas as funções setInterval, clearInterval e setTimeout. Cada uma dessas funções tem uma funcionalidade especial e também, assinaturas diferentes.

A seguir você verá a explicação de cada uma dessas funções e ao término do artigo, nossa videoaula completa explicando e criando códigos na prática.

Função setTimeout

A função setTimeout aguarda um determinado tempo em milésimos de segundos para disparar uma chamada a uma função. Pode ser utilizada para monitorar se algum elemento está disponível após alguns segundos.

Passamos no primeiro parâmetro uma função de callback e no segundo, o tempo de execução em milésimos.

setTimeout(funcao_aqui(), tempo_de_execucao)

const timeout = setTimeout(function(){
     //Faz alguma coisa
}, 3000) //Após 3 segundos a função é executada.

Veja que a variável timeout recebe o retorno da função setTimeout, com isso, conseguimos anular a execução da função, através de uma outra chamada clearTimeout. Veja abaixo a sua utilização

//Cancelamos a execução da função setTimeout.
clearTimeout(timeout)

Nota: A função setTimeout será executada apenas uma única vez. Caso deseje que a execução aconteça várias vezes, então você poderá usar a função setInterval, que vamos ver a seguir.

Função SetInterval

Essa função faz uma execução de forma cíclica, ou seja, é executada repetidas vezes até que sua execução seja cancelada. Recebe no primeiro parâmetro uma função de callback, quanto no segundo, o tempo para ser executado.

const interval = setInterval(() => {
    //Faz alguma coisa
}, 3000)

A sua forma de funcionamento é muito similar à da setTimeout, que já vimos mais acima. A diferença aqui é que aqui ela será executada várias e várias vezes.
Podemos também anular a sua execução, para isso usamos a função clearInterval. Veja o exemplo abaixo.

clearInterval(interval)

Nossa videoaula

Você pode assistir nossa videoaula completa e ver exemplos práticos.

Confira abaixo todos os códigos utilizados durante as aulas.

Exemplo setTimeout.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timeout</title>

    <script>

        // setTimeout(function () {
        //     changeText()
        // }, 1000)

        setTimeout(changeText, 1000)

        function changeText() {
            document.querySelector('#text').innerText = 'Hello World!'
        }

    </script>
</head>

<body>
    <h1 id="text">Waiting...</h1>
</body>

</html>

Exemplo setInterval.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interval</title>

    <script>
        let time = 0

        let interval = setInterval(function () {
            changeText()

            time++
        }, 500)

        function changeText() {
            document.querySelector('#text').innerText = `Current value: ${time}`
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.querySelector('#btnStop').addEventListener('click', (event) => {
                clearInterval(interval)
            })
        })

    </script>
</head>

<body>
    <h1 id="text">0</h1>

    <button type="button" style="color:red" id="btnStop">Stop</button>
</body>

</html>