Diferença entre setTimeout e setInterval

Utilizando JavaScript podemos executar uma determinada função de tempos em tempos. Em outras palavras é possível criar eventos que serão executados dentro do intervalo definido. Existem duas funções que são utilizados para a criação destes eventos que são: o setTimeout() e setInterval(). A diferença entres estas duas funções esta no comportamento. A função setTimeout é executada apenas uma unica vez após um determinado tempo, e o setInterval é executada em intervalos de tempo indefinidamente.

// Executa o evento a cada 10 segundos
setInterval(() => console.log('setInterval'), 10000);
// Executa o evento depois de 5 segundos
setTimeout(() => console.log('setTimeout'), 5000);

Exemplo

JavaScript:

const $watch = document.querySelector('#relogio');
const $timeout = document.querySelector('#delay');

const showCurrentTime = () => {
  const date = new Date();
  $watch.innerHTML = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
};

setTimeout(() => {
  $timeout.innerHTML = `setTimeout foi executado com sucesso.`;
}, 5000);

setInterval(showCurrentTime, 1000);

HTML:

<div id="relogio">Aguardando o setInterval ser Executado</div>
<div id="delay">Aguardando o setTimeout ser Executado</div>

Este código irá exibir a hora atual, atualizando a cada 1 segundo e após alguns segundos irá alterar o conteúdo do segundo elemento que está na tela. Para atualizar o relógio utilizamos o setInterval() que vai ser executado a cada 1 segundo exibindo a hora atual. O setTimeout() irá executar apenas uma vez depois de 5 segundos modificando a mensagem que está dentro do segundo elemento.

Então qual utilizar?

O indicado é utilizar o setInterval() sempre que você queria que uma determinada função seja executada entre invervalos de tempo. E utilizar o setTimeout() quando você quiser executar um método depois de um determinado tempo.