44

Vejo pela internet uma série de artigos com títulos como: setInterval is bad, que traduzindo seria setInterval é ruím.

Vi recomendações de usar uma função anônima recursiva com um setTimeout, por ser, aparentemente, melhor que o uso de setInterval

Exemplificando com setInterval:

setInterval(function (){
    $('#horas').html((new Date).toLocaleString().substr(11))
}, 1000);

Exemplificando com função recursiva e setTimeout:

(function getHours()
{
    $('#horas').html((new Date).toLocaleString().substr(11))
    setTimeout(getHours, 1000);

}());

Por que dizem isso?

Exemplo no JSFIDDLE

2 Respostas 2

38

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.

3
33
+50

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.

5
  • 1
    É isso aí. Se está na linguagem, é por algum motivo. Não vamos sair discriminando ou generalizando as coisas. Commented 3/08/2015 às 11:54
  • No exemplo dado por Wallace a escolha entre o setInterval e o setTimeout não faz diferença?
    – Paulo
    Commented 3/08/2015 às 12:28
  • @Orion Não, porque a função que os timers chamam não dispara nenhuma operação assíncrona (fora agendar a si própria no caso do setTimeout).
    – bfavaretto
    Commented 3/08/2015 às 13:08
  • @bfavaretto sua resposta é excelente, meus parabéns! Gostei muito da abordagem do saber usar a ferramenta para o proposito para qual foi criada. Mas no trecho: "Vai ter gente dizendo o contrário na internet, inclusive no SOen; não acredite!", por que eu deveria acreditar em você ao invés delas? Commented 21/12/2018 às 11:05
  • 2
    @Jedaias Você tem razão, preciso rever a resposta e incluir fontes.
    – bfavaretto
    Commented 21/12/2018 às 11:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .