setTimeout ou setInterval?

Tanto quanto eu posso dizer, estas duas peças de javascript se comportam da mesma maneira:

Opção A:

function myTimeoutFunction() { doStuff(); setTimeout(myTimeoutFunction, 1000); } myTimeoutFunction(); 

Opção B:

 function myTimeoutFunction() { doStuff(); } myTimeoutFunction(); setInterval(myTimeoutFunction, 1000); 

Existe alguma diferença entre o uso de setTimeout e setInterval ?

Eles essencialmente tentam fazer a mesma coisa, mas a abordagem setInterval será mais precisa do que a abordagem setTimeout , já que setTimeout aguarda 1000ms, executa a function e, em seguida, define outro timeout. Portanto, o período de espera é, na verdade, um pouco mais de 1000 ms (ou muito mais se a sua function levar muito tempo para ser executada).

Embora alguém possa pensar que setInterval executará exatamente a cada 1000ms, é importante observar que setInterval também atrasará, já que JavaScript não é uma linguagem multi-thread, o que significa que – se houver outras partes do script em execução – o intervalo terá que esperar que isso termine.

Neste violino , você pode ver claramente que o tempo limite ficará para trás, enquanto o intervalo é quase todo o tempo em quase 1 chamada / segundo (que o script está tentando fazer). Se você alterar a variável de velocidade no topo para algo pequeno como 20 (ou seja, ele tentará executar 50 vezes por segundo), o intervalo nunca atingirá uma média de 50 iterações por segundo.

O atraso é quase sempre insignificante, mas se você estiver programando algo realmente preciso, você deve usar um timer auto-ajustável (que é essencialmente um timer baseado em tempo limite que se ajusta constantemente para o atraso que é criado)

Existe alguma diferença?

Sim. Um Tempo Limite é executado por um determinado período de tempo após o setTimeout () ser chamado; um Intervalo executa um determinado período de tempo após o intervalo anterior ser acionado.

Você notará a diferença se sua function doStuff () demorar um pouco para ser executada. Por exemplo, se representarmos uma chamada para setTimeout / setInterval com . , um disparo do timeout / interval com * e execução de código JavaScript com [-----] , as linhas do tempo se parecem com:

 Timeout: . * . * . * . * . [--] [--] [--] [--] Interval: . * * * * * * [--] [--] [--] [--] [--] [--] 

A próxima complicação é se um intervalo triggersr enquanto o JavaScript já estiver ocupado fazendo alguma coisa (como manipular um intervalo anterior). Nesse caso, o intervalo é lembrado e acontece assim que o manipulador anterior termina e retorna o controle para o navegador. Então, por exemplo, para um processo doStuff () que é às vezes curto ([-]) e às vezes longo ([—–]):

 . * * • * • * * [-] [-----][-][-----][-][-] [-] 

• representa um disparo de intervalo que não pôde executar seu código imediatamente e foi colocado como pendente.

Então, os intervalos tentam “recuperar o atraso” para voltar ao cronograma. Mas eles não fazem fila um em cima do outro: só pode haver uma execução pendente por intervalo. (Se todos eles entravam na fila, o navegador ficaria com uma lista cada vez maior de execuções pendentes!)

 . * • • x • • x [------][------][------][------] 

x representa um disparo de intervalo que não pôde ser executado ou ficou pendente, então foi descartado.

Se a sua function doStuff () habitualmente demorar mais tempo para executar do que o intervalo definido para ela, o navegador consumirá 100% da CPU tentando repará-la e poderá ficar menos responsivo.

Qual você usa e por quê?

Tempo limite encadeado dá uma garantia de tempo livre ao navegador; O intervalo tenta garantir que a function que está sendo executada seja executada o mais próximo possível de seus horários programados, às custas da disponibilidade da interface do usuário do navegador.

Eu consideraria um intervalo para animações pontuais que eu queria ser o mais suave possível, enquanto que os timeouts encadeados são mais polidos para animações contínuas que ocorreriam o tempo todo enquanto a página é carregada. Para usos menos exigentes (como um atualizador trivial triggersndo a cada 30 segundos ou algo assim), você pode usar com segurança também.

Em termos de compatibilidade de navegador, setTimeout é anterior a setInterval, mas todos os navegadores que você conhecer hoje suportam ambos. O último retardatário por muitos anos foi o IE Mobile no WinMo <6.5, mas espero que isso também esteja para trás.

setInterval ()

setInterval() é um método de execução de código baseado em intervalo de tempo que possui a capacidade nativa de executar repetidamente um script especificado quando o intervalo é atingido. Ele não deve ser nested em sua function de retorno de chamada pelo autor do script para torná-lo loop, pois ele faz um loop por padrão . Ele continuará triggersndo no intervalo, a menos que você chame clearInterval() .

Se você quiser fazer um loop de código para animações ou para um clock, use setInterval() .

 function doStuff() { alert("run your code here when time interval is reached"); } var myTimer = setInterval(doStuff, 5000); 

setTimeout ()

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. Ele não será repetido novamente, a menos que você altere o script aninhando o object setTimeout() dentro da function que ele chama para executar. Se for voltado for loop, ele continuará triggersndo no intervalo, a menos que você chame clearTimeout() .

 function doStuff() { alert("run your code here when time interval is reached"); } var myTimer = setTimeout(doStuff, 5000); 

Se você quiser que algo aconteça uma vez após um período de tempo especificado, use setTimeout() . Isso porque ele só é executado uma vez quando o intervalo especificado é atingido.

O setInterval torna mais fácil cancelar a execução futura do seu código. Se você usar setTimeout, você deve manter o controle do id do timer, caso deseje cancelá-lo mais tarde.

 var timerId = null; function myTimeoutFunction() { doStuff(); timerId = setTimeout(myTimeoutFunction, 1000); } myTimeoutFunction(); // later on... clearTimeout(timerId); 

versus

 function myTimeoutFunction() { doStuff(); } myTimeoutFunction(); var timerId = setInterval(myTimeoutFunction, 1000); // later on... clearInterval(timerId); 

Eu acho o método setTimeout mais fácil de usar se você quiser cancelar o tempo limite:

 function myTimeoutFunction() { doStuff(); if (stillrunning) { setTimeout(myTimeoutFunction, 1000); } } myTimeoutFunction(); 

Além disso, se algo der errado na function, ela simplesmente parará de repetir no primeiro erro de tempo, em vez de repetir o erro a cada segundo.

A diferença está em seus propósitos.

 setInterval() -> executes a function, over and over again, at specified time intervals setTimeout() -> executes a function, once, after waiting a specified number of milliseconds 

É simples assim

Detalhes mais elaborados aqui http://javascript.info/tutorial/settimeout-setinterval

Quando você executa alguma function dentro de setInterval, que trabalha mais tempo que timeout-> o navegador ficará travado.

– Por exemplo, doStuff () leva 1500 seg. para ser executado e você faz: setInterval (doStuff, 1000);
1) Navegador executa doStuff () que leva 1.5 seg. para ser executado;
2) Após ~ 1 segundo, ele tenta executar doStuff () novamente. Mas o anterior doStuff () ainda é executado -> então o navegador adiciona essa corrida à fila (para rodar depois que o primeiro é feito).
3,4, ..) O mesmo adicionando a fila de execução para as próximas iterações, mas doStuff () do anterior ainda estão em andamento …
Como resultado, o navegador está preso.

Para evitar esse comportamento, a melhor maneira é executar setTimeout dentro de setTimeout para emular setInterval .
Para corrigir os tempos limite entre as chamadas setTimeout, você pode usar uma alternativa autocorretiva à técnica setInterval do JavaScript .

Eu uso setTimeout.

Aparentemente, a diferença é setTimeout chama o método uma vez, setInterval o chama repetidamente.

Aqui está um bom artigo explicando a diferença: Tutorial: timeres de JavaScript com setTimeout e setInterval

Este artigo diz que você deve evitar setInterval se possível, especialmente porque você pode replicar seu comportamento com setTimeout e obter alguns benefícios adicionais ao longo do caminho.

Eu fiz um teste simples de setInterval(func, milisec) , porque eu estava curioso o que acontece quando o consumo de tempo de function é maior que a duração do intervalo.

setInterval geralmente agendará a próxima iteração logo após o início da iteração anterior, a menos que a function ainda esteja em andamento . Em caso afirmativo, setInterval esperará até que a function termine. Assim que acontece, a function é imediatamente acionada novamente – não há espera pela próxima iteração de acordo com o cronograma (como seria sob condições sem function de tempo excedido). Também não há situação com iterações paralelas em execução.

Eu testei isso no Chrome v23. Espero que seja uma implementação determinista em todos os navegadores modernos.

 window.setInterval(function(start) { console.log('fired: ' + (new Date().getTime() - start)); wait(); }, 1000, new Date().getTime()); 

Saída do console:

 fired: 1000 + ~2500 ajax call -. fired: 3522 <------------------' fired: 6032 fired: 8540 fired: 11048 

A function de wait é apenas um auxiliar de bloqueio de thread - chamada ajax síncrona que leva exatamente 2500 milissegundos de processamento no lado do servidor:

 function wait() { $.ajax({ url: "...", async: false }); } 

Ambos setInterval e setTimeout retornam um ID de timer que você pode usar para cancelar a execução, ou seja, antes que os tempos limite sejam acionados. Para cancelar, você pode chamar clearInterval ou clearTimeout assim:

 var timeoutId = setTimeout(someFunction, 1000); clearTimeout(timeoutId); var intervalId = setInterval(someFunction, 1000), clearInterval(intervalId); 

Além disso, os tempos limite são cancelados automaticamente quando você sai da página ou fecha a janela do navegador.

Para examiná-lo de maneira um pouco diferente: setInterval garante que um código seja executado a cada intervalo dado (isto é, 1000ms, ou quanto você especifica) enquanto setTimeout define o tempo que ele ‘aguarda até’ executar o código. E como são necessários milissegundos extras para executar o código, ele sum 1000ms e, assim, o setTimeout é executado novamente em tempos inexatos (acima de 1000ms).

Por exemplo, os timers / countdowns não são feitos com setTimeout, eles são feitos com setInterval, para garantir que ele não atrase e o código seja executado no intervalo exato fornecido.

Bem, setTimeout é melhor em uma situação, como acabei de aprender. Eu sempre uso setInterval, que eu deixei para rodar em segundo plano por mais de meia hora. Quando voltei para essa aba, a apresentação de slides (na qual o código foi usado) estava mudando muito rapidamente, em vez de a cada 5 segundos que deveria ter. Na verdade, acontece de novo quando eu testo mais e se é culpa do navegador ou não, não é importante, porque com o setTimeout essa situação é completamente impossível.

A diferença é óbvia no console:

insira a descrição da imagem aqui

Você pode validar a resposta bobince por si mesmo quando executar o seguinte javascript ou verificar este JSFiddle

 
var timeout = 0; var interval = 0; function doTimeout(){ $('#timeout').html(timeout); timeout++; setTimeout(doTimeout, 1); } function doInterval(){ $('#interval').html(interval); interval++; } $(function(){ doTimeout(); doInterval(); setInterval(doInterval, 1); });

Seu código terá diferentes intevals de execução e, em alguns projetos, como jogos on-line, isso não é aceitável. Primeiro, o que você deve fazer, para fazer seu código funcionar com os mesmos intevals, você deve alterar “myTimeoutFunction” para isto:

 function myTimeoutFunction() { setTimeout(myTimeoutFunction, 1000); doStuff(); } myTimeoutFunction() 

Após essa mudança, será igual a

 function myTimeoutFunction() { doStuff(); } myTimeoutFunction(); setInterval(myTimeoutFunction, 1000); 

Mas, você ainda não terá resultado estável, porque o JS é single-threaded. Por enquanto, se o encadeamento JS estiver ocupado com algo, ele não poderá executar sua function de retorno de chamada e a execução será adiada por 2-3 ms. Você tem 60 execuções por segundo, e cada vez que você tiver um atraso random de 1-3 s, isso não será absolutamente aceitável (depois de um minuto será em torno de 7200 ms de atraso), e eu posso aconselhar a usar algo assim:

  function Timer(clb, timeout) { this.clb = clb; this.timeout = timeout; this.stopTimeout = null; this.precision = -1; } Timer.prototype.start = function() { var me = this; var now = new Date(); if(me.precision === -1) { me.precision = now.getTime(); } me.stopTimeout = setTimeout(function(){ me.start() }, me.precision - now.getTime() + me.timeout); me.precision += me.timeout; me.clb(); }; Timer.prototype.stop = function() { clearTimeout(this.stopTimeout); this.precision = -1; }; function myTimeoutFunction() { doStuff(); } var timer = new Timer(myTimeoutFunction, 1000); timer.start(); 

Este código garantirá um período de execução estável. Mesmo thread será ocupado, e seu código será executado após 1005 msegundos, da próxima vez que terá tempo limite para 995 ms, e o resultado será estável.

Apenas adicionando o que já foi dito, mas a versão setTimeout do código também alcançará o Maximum call stack size que irá impedi-lo de funcionar. Como não há base para a function recursiva parar, você não pode executá-la para sempre.

Provavelmente seria melhor replace a primeira function por este

Opções A ‘

 function myTimeoutFunction() { setTimeout(myTimeoutFunction, 1000);// At first doStuff(); } myTimeoutFunction(); 

Não é?

Eu acho que SetInterval e SetTimeout são diferentes. SetInterval executa o bloco de acordo com o tempo definido enquanto, SetTimeout executa o bloco de código uma vez.

Tente estes conjuntos de códigos após os segundos de contagem regressiva de tempo limite:

 setInterval(function(e){ alert('Ugbana Kelvin'); }, 2000); 

e depois tente

 setTimeout(function(e){ alert('Ugbana Kelvin'); }, 2000); 

Você pode ver as diferenças por si mesmo.