JavaScript: TimersCarlos SantosLabMM 3 - NTC - DeCA - UAAula 08, 10-10-2012
Porque devemos utilizar timers• uma estrutura de repetição (ciclos) executa um conjunto de instruções  sequencialmente• at...
timers• os timers permitem executar código em intervalos de tempo específicos  • sempre que um intervalo de tempo é atingid...
setInterval()• permite invocar repetidamente uma função num intervalo de tempo  especificado  • setInterval("javascript fun...
setTimeout()• permite invocar uma função, apenas uma vez, após um intervalo de tempo  especificado  • setTimeout("javascrip...
Para parar a execução de um timer• Quando um timer é criado ele é identificado por um valor que é devolvido no  momento da ...
exemplo de aplicação• criar uma animação horizontal do objecto “X”  • o objecto deve mover-se 20px em intervalos de tempo ...
estratégia de resolução do problema• obter a posição do objecto• mover o objecto para a direita, apenas um passo• colocar ...
Resolução na aula• Disponível em  http://labmm.clients.ua.pt/2012_LM3/teorica/setInterval_aula.html• Na solução da aula tí...
Próximos SlideShares
Carregando em…5
×

(A08) LabMM3 - JavaScript - Timers

771 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
771
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
107
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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!

×