Javascript: setTimeout() e setInterval()
Posted by: Rogério Alencar Lino Filho on: 19 Dezembro, 2006
- Em: Geral| Javascript
- Comment!
São duas funções interessantes do Javascript, com elas podemos definir um intervalo de tempo que um evento irá acontecer.
A sintaxe das duas funções é idêntica. O que muda é como agem.
Sintaxe:
window.setTimeout(‘funcao()’, intervalo_em_milisegundos);
window.setInterval(‘funcao()’, intervalo_em_milisegundos);
As duas funções irão chamar uma segunda função passada por parâmetro no intervalo determinado também por parâmetro.
Sendo a setTimeout() chamando a função uma única vez. Enquanto a setInterval() chama a função “infinitamente” sempre no mesmo intervalo de tempo.
Para pausar a função usa-se clearInterval(). Passando como parâmetro o nome do seu intervalo.
Ex:
var intervalo = window.setInterval(lerolero, 1000);
function lerolero() {
window.alert(“Popup”);
}
clearInterval(intervalo);
Juntando as duas funções podemos “brincar” fazendo por exemplo um script que simula um sorteio.
Ex:
var intervalo = window.setInterval(function() {
<funcao>
}, 50);
window.setTimeout(function() {
clearInterval(intervalo);
}, 3000);
Explicando: A setInterval() vai executar o que for definido dentro de uma função passada como parâmetro em 50 em 50 milisegundos. Isso durante 3000 milisegundos (3 segundos), que é o tempo definido na setTimeout() para entrar na função que pausa a setInterval.
Deu pra entender né? Veja o script um pouco mais incrementado em funcionamento aqui.
Você pode usar setInterval() para fazer um relógio também. Agora é só deixar com a criatividade de cada um.
mais sobre:
28 Respostas para "Javascript: setTimeout() e setInterval()"
30 Abril, 2007 às 3:20 am
Só um reparo no caso do sorteio:
Com os mesmos tempos dá sempre os mesmos frutos cada vez que carregas a página. Deverias fazer “random” ao array dos nomes de cada vez q corre a função.
30 Abril, 2007 às 4:46 pm
Caro amigo Wonderm00n,
obrigado pelo seu comentário, mas se você tivesse tido pelo menos o incômodo trabalho de olhar o código iria ver que lá tem random que sorteia uma posição no vetor.
abraços!
1 Maio, 2007 às 8:18 am
Tem razão.
Foi uma conclusão percipitada que tirei já que abri a página 2 vezes seguidas e deu exactamente o mesmo resultado.
8 Maio, 2007 às 3:53 pm
Wonderm00n, acredito ser coincidência, porque teste aqui umas 10 vezes e 1 vez caiu manga em seguida.
abs
7 Julho, 2007 às 9:04 am
É possível rodar o setTimeout dentro do escopo de um objeto?
Por exemplo:
function Objeto() {
function metodo1()
{
setTimeout(“metodo2()”,500);
}
function metodo2()
{
(…)
}
}
O codigo acima não irá funcionar… dará um erro de que não encontra o metodo… Mas existe uma sollução para este caso? Rodando dentro do espoco do objeto?
9 Julho, 2007 às 5:37 pm
existe algum modo d passar a funcao a ser executada por referencia, passar o prorpio elemento? exemplo:
function Objeto() {
var metodo1 = function(){
setTimeout(metodo2,500);
}
var metodo2 = function(){
(…)
}
}
ou ainda:
var obj = new Classe();
setTimeout(obj.metodo,500);
setTimeout ou setInterval
vlw!
30 Outubro, 2007 às 12:37 pm
boa a explicação mas no IE o setInterval meu só funciona uma vez … o que pode ser?
24 Janeiro, 2008 às 9:35 am
Ola tenho uma duvida em flash que ta me esbaratinando a cabeça.
e o seguinte quando eu uso o setTimeout(função, 2000) e entro na execução do filme em dois segundos ele executa a minha função beleza.
Mas se eu voltar para outro filme antes dos dois segundos passarem quando eu voltar neles de novo ela ira contar a partir de onde parou ela não vai resetar o contador.
Eu queria saber se tem como eu resetar o contador? Obrigado
29 Fevereiro, 2008 às 10:54 am
Olá a todos,
Existe algum modo de refrescar apenas o conteúdo de um sem refrescar todo o documento.
Obrigado.
[]’s António Pereira
6 Maio, 2008 às 1:54 am
Tentei utilizando da seguinte maneira e não funcionou / não passou o id:
var id = 3;
setTimeout(funcao('id'),5000);
// tentei tambem:
setTimeout("funcao('id')",5000);
Vou pesquisar mais quando tiver mais tempo
Obrigado
10 Outubro, 2008 às 4:53 pm
tive problemas para passar parametro para a função dentro do setInterval
a solução foi colocar assim
NÃO FUNCIONA
function upmove(spaceship) //dispara movimento para baixo
{
spaceship.intUp=window.setInterval('up(spaceship)',10);
}
FUNCIONA
function upmove(spaceship)
{
spaceship.intUp=window.setInterval(function(){up(spaceship);},10);
}
16 Outubro, 2008 às 4:50 pm
Valeu Krozu! Eu estava com o mesmo problema e consegui resolver dessa forma que voce citou.
Obrigada!!
function upmove(spaceship)
{
spaceship.intUp=window.setInterval(function(){up(spaceship);},10);
}
18 Novembro, 2008 às 1:45 pm
Mano exelente blog parabems. Seus post’s sempre me ajudaram…
abraços
6 Abril, 2009 às 9:32 am
eu estou fazendo um sorteioo como esse…mas no meu programa tem o botao ‘’sortear” e ”parar”
como faço para quando clicar no botao ”parar”,ele ir parando devagrinho….
o codigo esta assim:
function stope(){
document.form1.inicio.value = 0;
clearInterval(intervalID);
document.form1.conta.value = parseInt (document.form1.conta.value) + (parseInt (1));
var sorte= document.form1.conta.value;
if (sorte==1 || sorte<=3){
document.form1.nomes.options[a].selected=true;
}
else if (sorte==4){
document.form1.nomes.options[0].selected=true;
}
else if(sorte==5){
var a=Math.round(Math.random()*(document.form1.nomes.length-1));
document.form1.nomes.options[2].selected=true;
}
else{
document.form1.nomes.options[a].selected=true;
}
}
8 Abril, 2009 às 10:16 am
AHHHHHHHHHHHHH… Por isso que o setTimeout() só chamava a função uma vez. Nem sabia que existia um setInterval().
Muito bom, excelente!! Muito claro e explicativo. Obrigado por compartilhar seu conhecimento 
23 Abril, 2009 às 10:15 am
Olá de novo, Rogério. Eu fiz um Setimeout para quando eu clicar no botão stop,ele parar devagar…ele diminui a velocidade mas nao está parando.
var i=100;
var i2=300;
var i3=500;
var i4=700;
var i5=900;
var i6=1100;
tempo1 = window.setTimeout(’starte()’,i);
tempo2 = window.setTimeout(’starte()’, i2);
tempo3 = window.setTimeout(’starte()’, i3);
tempo4 = window.setTimeout(’starte()’, i4);
tempo5 = window.setTimeout(’starte()’, i5);
tempo6 = window.setTimeout(’starte()’, i6);
}
}
por favor me ajude..obrigado
12 Junho, 2009 às 1:59 am
porque eu sempre encontro oque preciso nesse blog ??? aff esse blog eh de mais…
28 Setembro, 2009 às 8:50 pm
Tenho o seguinte codigo e não consgui fazer o cronometro parar usando o ClearInterval ();
Alguem me ajuda?
function Funcao1 ()
{
var GuardaAlgo;
GuardaAlgo = new Date ();
Algo.value = GuardaAlgo.toLocaleTimeString ();
}
function Funcao2 (Intervalo_MSeg)
{
Funcao1 ();
setInterval (Funcao1, Intervalo_MSeg);
}
Janela:
18 Novembro, 2009 às 9:20 am
Krozu, tava com o mesmo problema da passagem de parametros no IE…valeu mesmo…
25 Novembro, 2009 às 9:27 am
Muito bom artigo, parabéns!
Tive o mesmo problema de outros colegas acima ao executar 2 funções sequencialmente utilizando o setTimeout(), em alguns casos o primeiro funcionava e o segundo não e vice-versa:
// não funcionou
setTimeout(upAgCompr(), 2000);
setTimeout(upCalendar(), 2000);
// funcionou
setTimeout(function(){upAgCompr()}, 2000);
setTimeout(function(){upCalendar()}, 2000);
Abraços
@thifacco
25 Novembro, 2009 às 10:34 am
Tiago,
quando passamos a função como parâmetro usando os parênteses, “()”, estamos invocando-a. Ao contrário de quando criamos uma função no próprio parâmetro e passamos a sua referência.
Então para a função não ser invocada e acabar passando como parâmetro o seu retorno, informamos-a sem “()” ou uma string contendo o seu nome.
Ex:
function foo() { alert(“bar”); }
setTimeout(foo, 100);
setTimeout(“foo()”, 100);
Att.
10 Dezembro, 2009 às 9:05 am
Legal Rogério!
Depois olhei com mais calma e notei mesmo que elas estavam sendo invocadas instantaneamente antes do timer.
Muito obrigado pela dica! Seu blog é show!
Abraços
16 Março, 2007 às 2:54 pm
Interessante, e tem várias aplicações possíveis, como num bate-papo por exemplo.