1. JavaScript: Timers
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 07, 02-10-2013

2. Porque devemos utilizar timers
• uma estrutura de repetição (ciclos) executa um conjunto de instruções
sequencialmente
• até que esse ciclo esteja terminado, o browser fica “bloqueado” ou pode
apresentar alguma lentidão
• durante a execução de um script, a camada de visualização do browser pode
não ser atualizada
• não é nada boa ideia implementar ciclos cujo tempo de execução seja longo!

3. timers
• os timers permitem executar código em intervalos de tempo específicos
• sempre que um intervalo de tempo é atingido, o timer lança um evento
que, normalmente, se traduz na invocação de uma função
• podemos ter muitos timers a correr em simultâneo e com tempos distintos

4. setInterval()
• permite invocar repetidamente uma função num intervalo de tempo
especificado
• setInterval("javascript function", milliseconds);
• setInterval("minhaFuncao()", 1000);
• setInterval(function(){minhaFuncao()}, 1000);

5. setTimeout()
• permite invocar uma função, apenas uma vez, após um intervalo de tempo
especificado
• setTimeout("javascript function", milliseconds);
• setTimeout("minhaFuncao()", 1000);
• setTimeout(function(){minhaFuncao()}, 1000);

6. Para parar a execução de um timer
• Quando um timer é criado ele é identificado por um valor que é devolvido no
momento da sua criação.
• var timerX = setInterval("minhaFuncao()", 1000);
• clearInterval(timerX);
• var timerY = setTimeout("minhaFuncao()", 1000);
• clearTimeout(timerY);

7. exemplo de aplicação
• criar uma animação horizontal do objeto “X”
• o objeto deve mover-se 20px em intervalos de tempo de 50ms;
• o movimento deve estar limitado entre as coordenadas 0 e 400 do
browser;
• sempre que se atinge um dos limites, o objeto “X” deve mudar de cor;
• depois de 4 mudanças de direção, a animação deve parar.

8. estratégia de resolução do problema
• obter a posição do objeto
• mover o objeto para a direita, apenas um passo
• colocar o objeto a mover-se automaticamente para a direita
• parar o objeto quando chega ao limite dos 400px
• colocar o objeto a andar de um lado para o outro
• fazer a mudança de cor quando se atingem os limites
• parar a animação no final das 4 mudanças de direção

9. Resolução na aula
• Ficheiro disponível na zona de ficheiros do grupo do SAPO Campus
• Na solução da aula o switch estava fora do if que verifica os limites do
movimento.
• porque é que alterei para ficar dentro do if?
• Nesta solução tive também o cuidado de acrescentar mais comentários. Para
além dos comentários, não se esqueçam que é uma boa prática adicionar
variáveis para todos os valores numéricos que são especificados no
enunciado.