Tip:
Highlight text to annotate it
X
ok, aqui eu nesse exemplo de assincronia javascript
só para termos uma ideia de como funciona essa parte ***íncrona
eu fiz um exemplo bem simples aqui
que nós inserimos aqui uma quantidade de segundos
clica no botão e ele conta para nós a cada meio segundo
e mostra no final uma mensagem
a programação disso não tem muita coisa HTML importante aqui
é tudo só estilo do materialize
o que tem, é apenas esse botão aqui
chamando uma função javascript
no caso é esse botão aqui, contar os segundos
ele chama a função "contador"
aqui tem um exemplo simples de como a gente faz isso
ok, o que eu fiz, eu declarei aqui 3 variáveis
para auxiliar-nos, as quais tem: "segundosContar"
que são os segundos que inserimos aqui
no caso 5
temos, a "contagem" que é a contagem mostrada no balão preto a direita
que vai sendo incrementada
e eu preciso de um identificador de uma operação aqui
chamada "setInterval"
antes de mostrar isso, da assincronia desse exemplo
eu preciso falar um pouco sobre
essas duas funções que vem junto da API do javascript
que são o "setTimeout" e o "setInterval"
essa funçao do "setTimeout" ela faz o seguinte:
passamos 2 parâmetros para ela
um de callback e outro que e são os milissegundos
o callback é passado uma função que vai ser chamada após se passar determinados milissegundos
que passamos como segundo parâmetro
o que acontece: quando se passam a quantidade de milissegundos que passamos no segundo parâmetro
por exemplo, 3000 milissegundos, serão 3 segundos
é chamado a primeira função que é o parâmetro de callback
nesse caso quando terminar os segundos que foram capturados da tela, o que foi digitado
(eu converto aqui pra segundos) vai ser chamado essa função aqui, "fimContador"
e antes de eu terminar a explicação dessa função
eu preciso apresentar a segunda função da API javascript que é o "setInterval"
o "setInterval" é similar ao "setTimeout"
mas a diferença é que ele é que chama a função de callback continuamente
após a quantidade de tempo, que é passado como segundo parâmetro
aqui os parâmetros são iguais, callback e milissegundos
porém a função de callback que está sendo passada aqui
ela vai ser chamada a cada 500 milissegundos
ou outra quantidade de milissegundos que passamos aqui
e o retorno aqui do "setInterval"
é um identificador desse contador, desse timer, do "setInterval"
então, eu pego esse identificador que ele retorna, e guardo aqui nessa variável "timer"
porque ele continua aqui executando indefinidamente até que eu faça isso
eu com identificador, faça isso: "clearInteval(timer)" ele para essa execução de callback aqui do "setInterval"
então agora eu consigo explicar certinho, o que acontece
eu pego aqui a variável de contagem
atribuo 0 porque já pode ter sido feito anteriormente outra contagem e o número estar maior que 0
eu pego da tela, os segundos a contar, transformo em número
com número já transformado aqui, eu consigo fazer uma multiplicação
se eu passo 3 por exemplo aqui, eu faço vezes 1000
que seria a transformação para milissegundos
3 vezes 1000 = 3000 milissegundos que são 3 segundos
e aqui já começa a contagem aqui, do que no caso seriam 3 segundos aqui
ai vem aqui o "setInterval"
que a cada 500 milissegundos vai entrar dentro dessa função de callback aqui
e acrescentar 0.5 a variável "contagem", que está aqui em cima
e que também está aqui, sendo zerada
para o caso de ja ter sido feito uma contagem
e essa variável aqui que é uma variável de numero
começo a mostra ela na tela a cada 500 milissegundos
vai mostrar com o "toast" aquele popup preto
o número da soma da contagem, de quantos segundos se passaram
quando acabar o tempo do "setTimeout"
então será chama a função "fimContador" essa função
vai pegar esse identificador de timer aqui
vai limpar, assim não vai mais ser chamado a função de callback do "setInterval"
e então é mostrado um alert de quantos segundos
foram informados mais o restante da mensagem
ok, então, vamos colocar em pratica isso, depurando pra ver se funciona mesmo
vamos vir aqui no navegador
F12 para depurar
vou abrir aqui o arquivo de javascript
e já tenho aqui alguns breakpoints colocados em alguns pontos estratégicos
ok, vou mandar executar aqui novamente
deixa eu posicionar melhor aqui, esse depurador, assim podemos visualizar melhor a mensagem do popup
cliquei em contar segundos
caiu aqui no breakpoint
podemos ver que a contagem já estava em 4.5
zerei ela
aí vou pegar daqui os 5 segundos, converti ela pra número
agora eu consigo fazer uma multiplicação com ela
pego ele, 5 vezes 1000 = 5000 milissegundos
note que agora e passado direto aqui por cima
sem parar aqui
isso acontece por ser ***íncrono
ele passa por aqui e só vai ser chamado novamente na função que passamos como callback
ok, agora vamos vir aqui novamente
note que será feita a mesma coisa no "setInterval"
só que ele deixou o número identificador da contagem
ok, vamos rodar
e caiu dentro aqui do nosso "setInterval"
que vai ficar sendo executado a cada 500 milissegundos, meio segundo
contagem = 0
foi acrecido 0.5 a ele
e mostrei a mensagem aqui
mesma coisa, foi para 1 e assim vai
vou tirar daqui esse breakpoint para não parar
e quando atingiria 5 segundos aqui
caiu aqui, limpou o interval para não ficar executando novamente isso e mostra o alert
"5 segundos se passaram, terminou a execução", acho que escrevi errado aqui haha
e é isso, eu acredito que com isso já seja possível
ter uma ideia do que é a assincronia com javascript
e vamos passar para o próximo tópico