Javascript ***íncrono E Ajax - Parte 2 - Assincronia javascript
#Requerimentos: O video requer que você já conheça pelo menos o básico de: - Lógica de programação - HTML - JavaScript - jQuery Framework #Código fonte: Projeto FlashBuyMobile no GitHub - ****** #Ferramentas Ultilizadas: Editor de Texto: Atom - ****** ##Server Side: JavaScript server side: Node.js - ****** JavaScript debugger: Node Inspector - ****** Framework web/REST: Express.js 4 - ****** Template Engine: Express Handlebars - ****** Banco de Dados: Mongo DB - ****** Biblioteca ODM Mongo DB: Mongoose - ****** ##Client Side: Estilo: Materialize CSS - ****** Biblioteca de manipulação DOM: jQuery - ******
Tip: Highlight text to annotate itX
ok, here I in this example javascript asynchrony
just to have an idea of how this part asynchronous
I made a simple example here
that we insert here a number of seconds
click the button and it tells us every half second
and shows at the end of a message
programming that is not very important thing here HTML
it's all just style materialize
which has only this button here
calling a javascript function
if this button is here, count the seconds
he calls the "counter"
Here is a simple example of how we do it
ok, what I did, I stated here 3 variables
to help us, which is: "segundosContar"
which are second to insert here
if 5
we, the "count" which is the count shown in black balloon right
it is being incremented
and I need an identifier of an operation here
called "setInterval"
before showing that, in this example asynchrony
I need to talk about
these two functions that comes with the javascript API
which are the "setTimeout" and "setInterval"
This function of "setTimeout" it does the following:
We pass 2 parameters to it
a callback and another that and are the milliseconds
the callback is passed a function that will be called after you pass certain milliseconds
We passed as the second parameter
what happens: when you pass the number of milliseconds spent in the second parameter
for example, 3000 milliseconds, 3 seconds will be
It is called the first function is the callback parameter
in this case when you finish the seconds were captured from the screen, which was entered
(I here to convert seconds) will be called this function here, "fimContador"
and before I finished the explanation of this function
I need to present the second function of javascript API that is the "setInterval"
The "setInterval" is similar to "setTimeout"
but the difference is that it is calling the callback function continuously
after the amount of time that is passed as a second argument
here the parameters are equal, callback and milliseconds
But the callback function that is being passed here
it will be called every 500 milliseconds
or other amount of milliseconds spent here
and return here the "setInterval"
It is an identifier of this counter, this timer, the "setInterval"
then I get this handle it returns, and keep here in this variable "timer"
because he keeps running here indefinitely until I do it
I handle with, do this: "clearInteval (timer)" it to this callback run here the "setInterval"
so now I can not explain just right, what happens
I caught here the count variable
0 because attribute may have been previously done and another count the number being greater than 0
I picked up the screen, the seconds count, turn into number
with number already transformed here, I can do a multiplication
if I step 3 for example here, I do times in 1000
that would be the transformation to milliseconds
3 times 1000 = 3000 milliseconds are 3 seconds
and here starts counting here than in the case here would be 3 seconds
here comes here "setInterval"
that every 500 milliseconds will enter into this callback function here
and add 0.5 to variable "count" which is up here
and it is also here being zeroed
in case already have been done a count
and this variable here that is a number of variable
I start to show it on the screen every 500 milliseconds
will display with the "toast" that black popup
the number of the sum of the count, how many seconds have passed
when the end time "setTimeout"
then it calls the "fimContador" this function
You will pick up this timer identifier here
will clean, so will no longer be called the callback function "setInterval"
and then shown an alert how many seconds
They were reported over the remainder of the message
ok, so let's put it into practice, debugging to see if it works
we come here in the browser
F12 to debug
here I will open the javascript file
and I have here some breakpoints placed in some strategic points
ok, I have performed here again
let me better position here, this debugger, so we can better see the popup message
I clicked the 2nd count
Here the breakpoint crashed
we can see that the count was already at 4.5
she zeroed
then I'll get here 5 seconds, she converted to number
now I can do a multiplication with it
caught it 5 times 1000 = 5000 milliseconds
note that now and straight past over here
without stopping here
it happens to be asynchronous
it goes through here and will only be called again in the function passed as callback
ok, now we come here again
note that the same thing will be done in the "setInterval"
only he left the count identifier number
ok, let's run
and fell in here from our "setInterval"
which will be running every 500 milliseconds, half a second
count = 0
it was 0.5 acrecido
and showed the message here
same thing, went to 1 and so on
I will take away this breakpoint not stop
and when reach 5 seconds, here
He fell here, cleared the interval not to be running it again and shows the alert
"5 seconds passed, running over," I think I wrote wrong here haha
and that, I believe that it is already possible
have an idea of what is the asynchrony with javascript
and we will move on to the next topic
