(A08) LabMM3 - JavaScript - Timers

763 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
763
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
107
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

(A08) LabMM3 - JavaScript - Timers

  1. 1. JavaScript: TimersCarlos SantosLabMM 3 - NTC - DeCA - UAAula 08, 10-10-2012
  2. 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 actualizada• não é nada boa ideia implementar ciclos cujo tempo de execução seja longo!
  3. 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
  4. 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. 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. 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. 7. exemplo de aplicação• criar uma animação horizontal do objecto “X” • o objecto 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 objecto “X” deve mudar de cor; • depois de 4 mudanças de direcção, a animação deve parar.
  8. 8. estratégia de resolução do problema• obter a posição do objecto• mover o objecto para a direita, apenas um passo• colocar o objecto a mover-se “sozinho” para a direita• parar o objecto quando chega ao limite dos 400px• colocar o objecto 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 direcção
  9. 9. Resolução na aula• Disponível em http://labmm.clients.ua.pt/2012_LM3/teorica/setInterval_aula.html• Na solução da aula tínhamos o switch fora do if que verifica as posições limite. • porque é que alterei a sua posição para ficar dentro do if?• Nesta solução tive também o cuidado de acrescentar mais comentários e adicionar variáveis para todos os valores numéricos que são especificados no enunciado. Estas são duas boas práticas de programação!

×