8

Click here to load reader

JavaScript - #Aula05 parte 02 - Temporizador

Embed Size (px)

Citation preview

Page 1: JavaScript - #Aula05 parte 02 - Temporizador

JavaScriptEffeccinco

Page 2: JavaScript - #Aula05 parte 02 - Temporizador

Temporizador

O JavaScript permite o uso de temporizadores em suas páginas Web, mas o que isso significa, isso quer dizer que você pode manipular uma ação com o tempo, é como se fosse um alarme de um relógio, mas ao invés de você dizer a hora que ele vai ser acionado, você diz a hora que ele inicia e depois quanto tempo depois você vai fazer ele acionar o alarme, por exemplo ele pode iniciar as 18 horas e tocar o alarme as 18:05 por exemplo.

Isso já nos faz pensar em como colocar isso no nosso bichinho virtual, então imagine que alguém clicou nele e ele ficou feliz, então depois de 5 minutos ele volta a ficar triste fazendo com que o usuário tenha que clicar nele de novo para ele voltar a ser feliz, ei mas espera ai, essa função parece ser a de um bichinho virtual mesmo né.

Page 3: JavaScript - #Aula05 parte 02 - Temporizador

Temporizador Decomposto

Para podermos começar a usar um temporizador precisamos conhecer duas coisas básicas que precisaremos configurar:

1 – Precisamos estabelecer o retardo do Tempo

2 – Precisamos informar qual o código que ele vai executar depois que o retardo de tempo acontecer

Page 4: JavaScript - #Aula05 parte 02 - Temporizador

Retardo de Tempo

O retardo do tempo é expresso em milésimos de segundo aqui entra uma coisa bem simples 1 segundo equivale a 1000 milésimos de segundo, se você quer que algo ocorra daqui a 5 segundos qual seria esse valor então?

5 vezes 1000 é igual a 5000 milésimos de segundo.

Aqui vemos um exemplo de código usando um temporizador:

setTimeout(refresh, 120000);

Page 5: JavaScript - #Aula05 parte 02 - Temporizador

Temporizador

E ai você saberia me dizer quanto tempo séria 120000 milésimos como nós vimos no exemplo anterior:

Seria 120 segundo que daria 2 minutos, mas espera eu ainda não te mostrei tudo, vamos olhar para o exemplo, você sabe me dizer o que significa refresh ?

Pois bem refresh é uma função do JavaScript que serve para atualizar a página Web, então naquele exemplo nós iriamos atualizar a página em 2 minutos, mas vocês já viram isso em algum lugar, experimente visitar o Uol e depois de um tempo o que acontece.

Page 6: JavaScript - #Aula05 parte 02 - Temporizador

Temporizador

Ahh mas existe somente esse temporizador que executa apenas uma vez e termina, não existem outros tipos como é o caso do temporizador de intervalo que vai acionando várias vezes até que você diga a ele para parar, ele executa algo repetidamente, mas eu não vou entrar em detalhes aqui nesse momento quem sabe mais pra frente no curso nós não descobrimos algo em que possamos aplicar ele e utilizamos. Agora vamos fazer mais uns exercícios sobre tempo só pra memorizar como funciona um temporizador, quanto vale em segundos os dados abaixo:

500ms ½ segundo

300.000ms 5 minutos

5.000ms 5 segundos

Page 7: JavaScript - #Aula05 parte 02 - Temporizador

Conheça nosso canal no Youtube

Canal:

https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A

Page 8: JavaScript - #Aula05 parte 02 - Temporizador

Referencia

Recomendamos a leitura

MORRISON, Michael. Use a Cabeça JavaScript. Editora Alta Books Ltda, 2008.