1
00:00:02,780 --> 00:00:07,730
Let's now dive a bit deeper into callbacks and async code and for this, I'll comment out this for loop,

2
00:00:07,910 --> 00:00:09,230
don't really need that here

3
00:00:09,230 --> 00:00:14,450
and instead let's say here where we have track user handler, instead of just logging clicked here,

4
00:00:14,630 --> 00:00:17,410
we want to get the user location.

5
00:00:17,450 --> 00:00:21,380
Now we can get this with the navigator object and then geolocation,

6
00:00:21,380 --> 00:00:26,630
this is a built-in API which allows us to reach out to the browser to get the user location with the

7
00:00:26,630 --> 00:00:28,740
help of getCurrentPosition.

8
00:00:28,970 --> 00:00:36,290
Now getCurrentPosition is a method here which actually, if you have a look at its parameters, takes

9
00:00:36,410 --> 00:00:40,070
three potential parameters - a success callback,

10
00:00:40,070 --> 00:00:46,460
basically a function that is executed if the position was successfully fetched, an error callback which

11
00:00:46,460 --> 00:00:52,970
is executed if the position was not successfully fetched and then an options object where you can configure

12
00:00:52,970 --> 00:00:58,970
how that should be fetched and you can either set up some named functions and pass in the names here, like

13
00:00:58,970 --> 00:01:03,150
I'm doing it here for the event listener or you use anonymous functions.

14
00:01:03,230 --> 00:01:08,330
So here for example, I'm using an anonymous arrow function where I get my position data and then I

15
00:01:08,330 --> 00:01:10,010
can console log posData,

16
00:01:10,040 --> 00:01:15,670
that's my success callback, as a second argument to getCurrentPosition I have my error

17
00:01:16,160 --> 00:01:22,470
and here I can console log that, this will be the error callback. Well and then if we wanted to, we

18
00:01:22,470 --> 00:01:29,700
could pass in a third argument, an object where we can configure that, for example set timeout, how long

19
00:01:29,700 --> 00:01:35,340
we want to wait for this to resolve until we throw an error and so on but I'll not do that and go with

20
00:01:35,340 --> 00:01:37,170
the default instead.

21
00:01:37,190 --> 00:01:42,870
Now if we do that, what happens is if I reload and I click track me, here I am asked if I want to allow

22
00:01:42,870 --> 00:01:48,420
access, I click allow here in this case and now this will take some time to locate me and get that location

23
00:01:48,570 --> 00:01:54,330
and after a while, here it's done and we can expand this to now also see the coordinates if we want

24
00:01:54,330 --> 00:01:54,980
to

25
00:01:55,170 --> 00:02:00,030
and read them and do whatever we want to do with that in our app here.

26
00:02:00,120 --> 00:02:01,910
Quite convenient for many apps,

27
00:02:01,980 --> 00:02:07,930
let's say you're building a food delivery web service, then getting the user location might be useful.

28
00:02:08,010 --> 00:02:12,570
Now here, we got these cases. Now to also simulate the error

29
00:02:12,570 --> 00:02:15,360
case here, let me reload, click this again

30
00:02:15,360 --> 00:02:22,090
and now I block this and now you see I get this error object and it's thrown or printed by app.js

31
00:02:22,110 --> 00:02:26,520
line 10 and this is simply the line here in this error callback.

32
00:02:26,550 --> 00:02:28,320
So this is how these callbacks work

33
00:02:28,320 --> 00:02:34,140
and just as with add event listener, getCurrentPosition offloads this task to the browser and when it's

34
00:02:34,140 --> 00:02:38,310
done, it pushes this into the event loop to execute our code there.

35
00:02:40,200 --> 00:02:47,160
Now just as before, if we do something after calling getCurrentPosition, like outputting this to the

36
00:02:47,160 --> 00:02:54,540
log here, then this line will run before we print either of these lines, simply because we execute this

37
00:02:54,540 --> 00:03:00,420
code, push it to the browser and no matter how fast it finishes, Javascript moves on to the next line

38
00:03:00,750 --> 00:03:03,690
and the browser is then able to push this into the message

39
00:03:03,690 --> 00:03:08,940
queue so that the event loop moves to the call stack but the event loop will only do this once the call stack

40
00:03:08,940 --> 00:03:09,760
is empty.

41
00:03:09,780 --> 00:03:15,840
So since this line is executed right away, even if we would get the position instantly, still this would

42
00:03:15,840 --> 00:03:21,990
print first because that goes into the event loop first, this code here inside of the callback functions

43
00:03:22,170 --> 00:03:27,840
can never be executed before this code because this is offloaded to the browser and the browser always

44
00:03:27,840 --> 00:03:30,330
has to take the way over this message

45
00:03:30,330 --> 00:03:35,760
queue and with the event loop to then go back into our current Javascript execution, something which is not

46
00:03:35,760 --> 00:03:40,920
the case for this line, this is executed immediately after handing this off to the browser.

47
00:03:40,950 --> 00:03:47,160
So this line will always execute before one of these lines no matter how fast they actually are done,

48
00:03:47,190 --> 00:03:51,360
even if it would be done instantly, we would still execute this here first.

49
00:03:51,510 --> 00:03:52,460
This is how that works,

50
00:03:52,460 --> 00:03:54,860
so if I reload here, click track me, click

51
00:03:54,860 --> 00:04:00,690
block, still getting position was printed instantly because Javascript is non-blocking.