1
00:00:02,270 --> 00:00:07,850
Now let's take this to the next level and let's say once we have a response, I actually for whatever

2
00:00:07,850 --> 00:00:12,760
reason want to set a timer of 2 seconds and only after these 2 seconds,

3
00:00:12,760 --> 00:00:17,930
I'll print the response. So here I'll have another anonymous function, another callback in there

4
00:00:17,930 --> 00:00:21,770
and in there, I console log posData. I have access to posData

5
00:00:21,800 --> 00:00:26,250
because of that closure thing as you learned, this is a function nested inside of this function,

6
00:00:26,250 --> 00:00:27,420
so this will work fine

7
00:00:27,530 --> 00:00:31,530
but I only do it after 2 seconds, for, as I said, whatever reason.

8
00:00:31,910 --> 00:00:34,170
So now we have basically a callback,

9
00:00:34,430 --> 00:00:38,990
this one here in another callback which in the end is part of another callback,

10
00:00:39,010 --> 00:00:43,610
so of track user handler which also is a callback of the event listener and we can already see that

11
00:00:43,610 --> 00:00:50,210
this gets a bit hard to read over time, the more callbacks you nest, the harder your code can get to read

12
00:00:50,210 --> 00:00:50,920
and maintain

13
00:00:50,930 --> 00:00:54,330
and we'll have a look at this in a second, for now let's just see if it works.

14
00:00:54,530 --> 00:01:00,950
If I save that and I reload and click track me and I click allow, it takes a while to get the position

15
00:01:00,950 --> 00:01:06,620
and then it takes an additional 2 seconds because of the timer and only after this will show this

16
00:01:06,740 --> 00:01:07,730
object.

17
00:01:07,730 --> 00:01:13,250
Now the idea here really just is to show you that you can nest these operations, you can have an async

18
00:01:13,250 --> 00:01:19,220
operation in an async operation but of course this timer is only kicked off once the location is there,

19
00:01:19,220 --> 00:01:24,740
so once this outer callback function executed. It's also important to understand by the way

20
00:01:24,740 --> 00:01:31,370
now that we speak about timers that if you set a timer here, so in track user handler but not inside of

21
00:01:31,370 --> 00:01:36,770
getCurrentPosition but right before outputting this console log, if you execute this function

22
00:01:36,770 --> 00:01:37,830
right away,

23
00:01:37,850 --> 00:01:44,660
so if you set a timer of zero here, you will still see something interesting. If I console log timer

24
00:01:44,660 --> 00:01:45,740
done here,

25
00:01:46,040 --> 00:01:50,150
would you expect that this runs before getting position or thereafter?

26
00:01:50,150 --> 00:01:53,470
Well let's find out, if I reload and click track me,

27
00:01:53,720 --> 00:01:59,030
you see actually getting position ran first and then we saw timer done even though I set a timer

28
00:01:59,030 --> 00:01:59,850
of zero

29
00:01:59,960 --> 00:02:03,590
and the reason for that is related to what I explained a second ago.

30
00:02:03,590 --> 00:02:08,690
We hand something off to the browser, no matter if it's an event listener, the position fetching or this

31
00:02:08,750 --> 00:02:14,660
timer and then for the browser to execute the callback function, it always has to take the route over

32
00:02:14,660 --> 00:02:15,140
the

33
00:02:15,200 --> 00:02:17,300
message queue and the event loop

34
00:02:17,300 --> 00:02:22,510
and therefore this code always executes first, this executes right away after set timeout executes

35
00:02:22,760 --> 00:02:29,950
and even though the timer immediately finishes, this function still only executes after this line is done

36
00:02:30,050 --> 00:02:32,550
and this by the way has one important implication,

37
00:02:32,660 --> 00:02:37,490
this is the minimum time after which the callback function will be executed,

38
00:02:37,490 --> 00:02:39,360
it's not the guaranteed time,

39
00:02:39,470 --> 00:02:44,600
if it were guaranteed, it would need to run immediately. If we had the long running for loop here, then

40
00:02:44,600 --> 00:02:49,670
this timer would only execute once the long running for loop is done which might take three seconds.

41
00:02:49,670 --> 00:02:55,030
So this is not a guaranteed time, no matter if it's zero or 3000 or whatever it is,

42
00:02:55,100 --> 00:02:57,200
it's not guaranteed, it's the minimum

43
00:02:57,320 --> 00:03:03,770
and the same for set interval. It's the minimum where Javascript and the browser try to run this but

44
00:03:03,770 --> 00:03:08,360
they are only able to run this function if the call stack is empty and if something is blocking the call

45
00:03:08,360 --> 00:03:10,970
stack, that will go first.

46
00:03:10,970 --> 00:03:16,730
So here, this line will always run first because this always has to take the route over the message queue

47
00:03:16,940 --> 00:03:17,720
and the event loop.