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. 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. 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 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. 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. 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!
