Eu sempre desconfio de afirmações do tipo "X é melhor que Y", ou "X é do mal". Elas geralmente têm fundamento, mas não devem ser seguidas cegamente. O ideal é entender o motivo pelo qual essas afirmações existem, e saber usar a ferramenta certa, na hora certa. Com os timers do JavaScript não é diferente.
A resposta curta é: os dois métodos são equivalentes quando você estiver agendando operações síncronas. Quando você agenda operações assíncronas, como consulta a dados no servidor, o uso do setInterval
pode causar efeitos indesejados, dependendo do que for feito no callback da operação assíncrona.
Agora a explicação longa :)
Como os timers funcionam no JavaScript
Os timers em JavaScript não são precisos. Quando você dá a um timer um intervalo de n
milissegundos, o que ocorre é que seu callback será executado em pelo menos n
milissegundos. Isso é consequência da maneira como a linguagem é implementada, com Thread única e um loop de eventos controlando o fluxo de execução de operações assíncronas.
No início de cada ciclo desse loop de eventos, as operações assíncronas pendentes são tratadas. Por exemplo, se foi dado um clique com o mouse em determinado elemento que possui event listener, esse listener é executado, e bloqueia a thread até que sua execução termine.
Com os timers é a mesma coisa: se no início de um ciclo for detectado um timer expirado, seu callback será executado. Esse callback vai bloquear a execução de qualquer outro código até que tenha executado suas tarefas.
setInterval
e setTimeout
Levando em conta o modelo de execução explicado acima, considere este código:
// agenda func para executar em 100ms
setTimeout(func, 100);
// operação que demora 150ms
fazOperacaoLenta();
Isso executa conforme a seguinte cronologia:
tempo: 0ms 100ms 150ms
| | |
----------------+----------------+--------+------>
ciclo do loop | X |
de eventos: 1 2
fazOperacaoLenta() func()
A função que tinha sido agendada para 100ms adiante precisou esperar mais, 150ms, pois o código síncrono do ciclo anterior demorou esse tempo para terminar de executar.
Com setInterval
, ocorre esse mesmo atraso, que vai se acumulando e pode impedir que o callback execute em certos momentos em que ele seria esperado:
// agenda função lenta para executar em 100ms
setInterval(fazOperacaoLenta, 100);
// operação que demora 150ms
fazOperacaoLenta();
Isso executa conforme a seguinte cronologia:
tempo: 0ms 100ms 150ms 200ms 300ms
| | | | |
----------------+----------------+--------+--------+----------------+----->
ciclo do loop | X | X |
de eventos: 1 2 3
fazOperacaoLenta() fazOperacaoLenta() fazOperacaoLenta()
Repare que nesse período de 300ms era para a função ter executado 4 vezes (uma imediatamente, e 3 agendadas a cada 100ms), porém só executou 3 vezes. A execução prevista para os 100ms rodou aos 150ms. Ao chegar nos 300ms, perceba que houve um encavalamento: haveria duas execuções previstas, a dos 200ms e a dos 300ms, mas uma delas acaba sendo descartada, e a função executa apenas uma vez. (Vai ter gente dizendo o contrário na internet, inclusive no SOen; não acredite!)
Timers que disparam operações síncronas
Nos trechos de código que você colocou na pergunta, a operação agendada (atualizar um elemento do DOM com o horário atual) é síncrona. Ela executa imeditamente a cada chamada da função agendada, e bloqueia a execução de qualquer outro código até o seu trabalho (atualizar o DOM) ter terminado.
Nesses casos não há nenhuma diferença entre usar setInterval
ou várias chamadas encadeadas a setTimeout
. O comportamento nos dois casos será idêntico.
Nota: prefiro dizer "encadeadas" do que recursivas neste caso. Tecnicamente, na recursão uma função chama a si própria, e isso afeta a pilha de chamada, que vai aumentando até que a recursão seja interrompida. No seu exemplo de código, uma função é executada e agenda a próxima execução de si mesma para o futuro. Isso é uma operação assíncrona, e não afeta a pilha de chamada.
Timers que disparam operações assíncronas
Essa história de que o setInterval
é "do mal" vem do seu uso para disparar operações assíncronas, especialmente consultas a um servidor remoto, que responde com dados que precisem ser tratados e/ou inseridos no DOM. De fato, se você quer atualizar um elemento da página com dados do servidor a cada, digamos, meio segundo, a abordagem mais ingênua é usar o setInterval
para disparar requisições ao servidor a cada 500ms. Mas isso pode causar problemas, como respostas fora da ordem como já mencionado na resposta do @Sergio, ou receber duas respostas muito próximas uma da outra (uma chegou "atrasada", ou a outra "adiantada").
Os callbacks de requisições ajax são executados na primeira oportunidade (ciclo do loop de eventos) após o servidor responder com os dados solucitados (ou com um erro). Porém, o tempo de resposta do servidor pode variar de uma requisição para a outra, dependendo de fatores totalmente fora do nosso controle, como tráfego, e outros até mais ou menos controláveis, como a carga de CPU ou memória da máquina. Mas nada garante que, ao enviar uma sequência de requisições, as respostas cheguem na mesma ordem. Então, se a sua necessidade é ter uma fila de requisições, com respostas tratadas na ordem, precisa enviar uma nova requisição apenas após a resposta da anterior ter chegado.
Conclusão
Eu acredito que o mito de que não se deve nunca usar setInterval
venha desse caso da fila de requisições assíncronas, que é algo bem comum de as pessoas quererem implementar. Realmente nesse caso é melhor encadear chamadas a setTimeout
. Talvez para quem não sabe bem o que está fazendo seja uma boa recomendação usar sempre o setTimeout
. Mas se você sabe o que está fazendo – e o objetivo desta minha longa resposta foi tentar ajudar você a saber –, tem como usar a ferramenta certa na hora certa.