Ao construir seus programas, você frequentemente vai querer que algo aconteça após um atraso ou se repita em intervalos regulares. É aí que os métodos setTimeout() e setInterval() são úteis. Ambos os métodos aceitam dois parâmetros: uma função e um delay. Vamos analisar cada um dos métodos com mais detalhes para que você possa começar a usá-los em seus projetos web.  setTimeout() permite que você atrase uma ação por um tempo especificado. Aqui está a sintaxe básica do método setTimeout():

setTimeout(functionToRun, delay);

functionToRun é o código que você quer executar após um atraso especificado e delay é o tempo (em milissegundos) para esperar antes de executar a função. Aqui está um exemplo:

setTimeout(function () {
 console.log("This runs after 3 seconds");
}, 3000);

Você também pode usar uma função arrow para o callback, assim:

setTimeout(() => {
 console.log("This runs after 3 seconds"); 
}, 3000);

setInterval() continua repetindo uma função em um intervalo definido. É como ter um alarme que dispara a cada poucos segundos. setInterval() é perfeito quando você quer que algo aconteça repetidamente, como atualizar dados ou criar uma animação que se move continuamente. Assim como setTimeout(), ele recebe uma função e um atraso:

setInterval(functionToRun, delay);

functionToRun é o código que você quer executar repetidamente, enquanto delay é o tempo em milissegundos entre cada execução dessa função. Aqui está um exemplo:

setInterval(() => {
 console.log("This runs every 2 seconds");
}, 2000);

// Result:
// This runs every 2 seconds
// This runs every 2 seconds
// This runs every 2 seconds
// ...

Como setInterval() continua executando a função fornecida no intervalo especificado, você pode querer pará-lo. Para fazer isso, você precisa usar o método clearInterval(). Para fazer o trabalho, clearInterval() recebe o ID do setInterval() que você quer parar. Isto pode ser uma variável à qual você atribui o intervalo. Uma forma de parar o intervalo é dentro de um setTimeout(), pois isso vai parar o intervalo após um determinado tempo:

const intervalID = setInterval(() => {
 console.log("This will stop after 5 seconds");
}, 1000);

setTimeout(() => {
 clearInterval(intervalID);
}, 5000);

Você também pode parar um timeout com o método clearTimeout():

let timeoutID = setTimeout(() => {
 console.log("This will not run");
}, 5000);

clearTimeout(timeoutID);

Com esse código, o setTimeout() não será executado. Então, uma forma mais elegante de fazer isso é através do DOM, adicionando um listener de evento de clique a um botão para parar o timeout:

<h1>Cancel Timeout Example</h1>
<button id="cancelButton">Cancel Timeout</button>
<script src="index.js"></script>

let timeoutID = setTimeout(() => {
  console.log("This will run if not canceled");
}, 5000);

document
.querySelector("#cancelButton")
.addEventListener("click", () => {
  clearTimeout(timeoutID);
  console.log("Timeout canceled!");
});