Javascript: setTimeout() e setInterval()

46 Replies

Ver post no novo domínio: http://rogeriolino.com/2006/12/19/javascript-settimeout-e-setinterval/

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:

http://javascript.about.com/library/blstvsi.htm

http://www.w3schools.com/js/js_timing.asp

46 thoughts on “Javascript: setTimeout() e setInterval()”

  2. Wonderm00n

    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.

    Responder ↓
  8. Henrique

    É 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?

    Responder ↓
  9. Nelson

    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!

    Responder ↓
  12. Joao Ricardo

    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

    Responder ↓
  13. António Pereira

    Olá a todos,
    Existe algum modo de refrescar apenas o conteúdo de um sem refrescar todo o documento.
    Obrigado.

    []’s António Pereira

    Responder ↓
  14. Rodrigo

    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

    Responder ↓
  16. Krozu

    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);
    }

    Responder ↓
  17. Ana

    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);
    }

    Responder ↓
  19. Matheus

    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;
    }

    }

    Responder ↓
  20. Fernando

    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 🙂

    Responder ↓
  21. Matheus

    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

    Responder ↓
  23. Julia

    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:

    Responder ↓
  25. Tiago Facco

    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

    Responder ↓
  26. Rogério Alencar Lino Filho Post author

    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.

    Responder ↓
    1. Willie Oliveira

      Toda função é um objeto do tipo ‘function’ em JavaScript!

      Então quando declaramos setInterval, como por exemplo: setInterval(foo, 500), foo refere-se à um objeto do tipo “function” e não seu retorno como mencionado.

      Para verificar faça o teste alert(typeof foo), que logicamente imprimirá a String “function”.

      Quando optamos por passar a função como String, como por exemplo: setInterval(“foo()”, 500), estamos passando uma instrução a ser avaliada pela função ‘eval’ do JavaScript que no caso em questão realiza uma chamada para a função ‘foo()’.

      Responder ↓
  28. grazi

    Olá, estou com o seguinte codigo :

    FECHAR

     BANNER DHTML 

    function fecha_dhtml(){
    document.getElementById(“oas_fecha_dhtml”).style.display=”none”;
    }

    var start = 10; // 15 segundos, altera-se aqui o tempo para fechar
    function contador_fecha_dhtml () {
    if (start > 0) {
    window.setTimeout(“contador_fecha_dhtml()”, 1000);
    }
    else {
    fecha_dhtml();

    }
    start–;
    }

    contador_fecha_dhtml();

    E não funcionaaa!! não fecha em 10 seg, vcs podem me ajudar?

    Responder ↓
  29. Diogo

    Ótimo post!
    Adaptei-o ao meu código e funcionou beleza!
    Valeu!
    ——————————————

    function limparCacheNavegador(){
    var intervalo = window.setTimeout(“javascript: delayReload();”, “2000”);
    window.setTimeout(“javascript: limparIntervalo();”, 1000);
    }

    function delayReload() {
    if (navigator.userAgent.indexOf(“MSIE”) != -1){
    window.self.history.go(0);
    }
    //Para o Firefox não é necessário
    /*
    else {
    window.self.location.reload();
    }*/
    }

    function limparIntervalo() {
    clearInterval(intervalo);
    }

    Responder ↓
  32. João henrique Sewaybrick

    Me ajudo muito, fiz uma galeria de imagens usando o temporizador setInterval.

    O legal que dá para pausar.

    Adorei o layout do site,bonito e ao mesmo tempo leve.
    (Parabéns).

    Responder ↓
  33. david

    um bom exemplo de gerador de números randômicos:

    function getRandomNumber(){
    // joguei um dado, caiu no 5, e escrevi ele aqui;
    // mais randômico que isto é impossível!!
    return 5;
    }

    Responder ↓

  34. Pingback: Carlos Anderson » Arquivo do Blog » Criando seu próprio efeito com jQuery

  41. Pingback: How to remove alert from "Uncaught RangeError: Maximum call stack size exceeded"

Deixe uma resposta para Rogério Alencar Lino Filho Cancelar resposta