Loop for com espera entre iterações

Recentemente tive uma duvida, como fazer para que um for tivesse esperasse alguns segundos entre cada iteração? Supodo que eu queira exibir um alerta em 10 vezes a de 5 em cindo segundos, como posso fazer com que o JavaScript espere estes 5 segundos?

Existem timers em JavaScript, como setInterval e setTimeout. SetInterval é um método de execução de código baseado em intervalo de tempo que tem a capacidade nativa de executar repetidamente um script especificado quando o intervalo é atingido. setTimeout é um método de execução de código baseado em tempo que executará um script apenas uma vez quando o intervalo for atingido.

Tendo isto em mente, a primeira coisa que tentei foi colocar o setTimeout dentro do for para tentar obter essa espera

function timeoutFunction()
{
  console.log("Iniciando Teste");
  for(i = 0; i < 10; i++) {
    setTimeout(function () {
      console.log("Teste "+i);
    }, 5000);
  }
}
timeoutFunction();

Após o primeiro log, há um atraso de 5s, mas quando os logs dentro do setTmeout ocorrem em grupo

Por que isso acontece?

A função setTimeout() é uma função que roda em outra thread e por isso ela não bloqueia a execução do for, ou seja a função é invocada e o código segue executando sem precisar esperar que ela termine. Com isso ele executará as 10 execuções em questão de milisegundos e todos os tempos de espera ocorreram praticamente juntos.

Como adicionar o delay no loop for?

A Expressão de Função de Chamada Imediata (IIFE – Immediate Invoking Function Expression) pode ser usada para obter o que queremos. Sua sintaxe funciona da seguinte forma:

(function () {

})();

O IIFE chama imediatamente uma função. Isso significa simplesmente que a função é executada imediatamente após a conclusão da definição. Se utilizarmos essa função, obteremos a saída desejada

console.log("Iniciando Teste");
for (var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(function () {
      console.log("Teste" + i);
    }, 5000*i);
  })(i);
};

O código acima, mesmo que você nunca tenha usado uma IIFE é simples, nó passamos a varável “i” como parametro da função (pois se tentarmos acessa-lo direto do loop o settimeout conseguirá obter apenas a iteração final com i = 9) e fazemos uma matemática simples para que as funções executem de forma a serem 5 segundos X nº iteração.