O problema que leva a considerar a recursividade é que o setInterval
é "cego". Ele corre independentemente de o código assíncrono dentro ter completado ou não, ter dado erro ou não. Usando setTimeout
recursivo é um método melhor e com mais controlo.
Um exemplo típico é um pedido Ajax que tem de ser executado de tempos em tempos. Com setInterval
pode acontecer de os pedidos e respostas chegarem com ordem trocada, pois não é garantido que cheguem sequencialmente. Fazendo o mesmo com setTimeout
pode controlar-se primeiro que a resposta chegou e depois enviar novo pedido.
Um outro aspecto importante é que um setInterval
corre o código mesmo que a execução anterior tenha dado erro. Isso pode gerar erros em cadeia e criar muito lixo no log. O setTimeout
não se comporta assim, ele pára caso haja erros no script.
Um outro exemplo é caso o código síncrono demore mais tempo a executar do que o intervalo de espera do setInterval
. Neste caso o Browser espera o código dentro do setInterval
de executar, e depois inicia a nova execução. Isto pode levar a problemas caso se esteja a contar que o código demore x tempo.
Exemplo: http://jsfiddle.net/z7vb46p5/. Neste exemplo o setInterval
recebe um intervalo de meio segundo, mas na prática demora mais tempo, à espera que o código síncrono acabe de correr.
Pode ler-se sobre isto também na MDN, que recomenda usar recursividade via setTimeout
em casos onde o código a ser executado dura mais tempo do que o intervalo em si (como referi em cima):
If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using
window.setTimeout
. For example, if using setInterval to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its alloted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.
For such cases, a recursive
setTimeout
pattern is preferred
Há claro casos em que o setInterval
é mais simples, e deve ser usado, mas nem sempre é a melhor solução. Intervalos grandes, ou para fazer atualizações constantes de código simples, o setInterval pode mesmo ser a melhor solução.
Nota: Quando o que se pretende é ter uma ação repetida em muito curto espaço de tempo no Browser, então pode ser melhor usar o requestAnimationFrame
que é uma função que o browser disponibiliza para correr uma função no próximo momento que o browser tenha livre.