Funções setInterval e setTimeout.

E ae pessoal, beleza?

Hoje estava dando uma estudada no JS e encontrei duas funções interessantes. A primeira se chama setInterval, onde você consegue setar para que determinada ação ocorra numa frequência de período 'x' de tempo. Por exemplo, mostrar a hora.

function mostraHora() {
    let data = new Date();
  
    return data.toLocaleTimeString('pt-BR' , {
       hour12:false;
    });
}

const relogio = setInterval(function() {
    console.log(mostraHora());
}, 1000);

setTimeout(function() {
    clearInterval(relogio);
}, 5000);

Está ocorrendo o seguinte nesse exemplo acima:

1. A função 'mostraHora' executa a criação de um objeto 'new Date' na variável 'data'
2. Essa mesmo função 'mostraHora' retorna essa variável 'data' formatada com o 'toLocaleString' no formato 'pt-BR' e com o formato 24h, por isso o 'hour12:false'
3. A variável 'relógio' recebe a criação da função 'setInterval' que, quando executada, printa na tela o retorno da função 'mostraHora', com um intervalo de 1 em 1 segundo, por isso os '1000' no final da sintaxe. Porém, essa função por si só não tem uma 'parada', ela continuaria executando por tempo indeterminado.
4. Então é criada a função 'setTimeout' que, basicamente, corresponde à mesma lógica da função 'setInterval', porém com um tempo determinado. Ou seja, após 5 segundos como descrito na sintaxe '5000', ela irá executar o 'clearInterval' chamando como parâmetro a variável 'relógio' que, como o nome sugere, 'limpa a função setInterval' . Portanto, após 5 segundos irá ser interrompido a mostragem da hora na tela do usuário.

Achei essas duas funções muito interessantes pelas possibilidades que elas abrem no dia a dia do programador. Por exemplo, após o usuário clicar em determinado produto você abrir um pop-up de promoção, ou após o usuário clicar numa determina aba acontecer alguma interação de mudança de tela, enfim, as possibilidades são inúmeras.