1
00:00:02,090 --> 00:00:06,680
But the concept I explained in the last lecture can have a downside,

2
00:00:06,680 --> 00:00:13,150
what if we have certain operations that take a bit longer and that expectedly take a bit longer?

3
00:00:13,250 --> 00:00:16,410
Let's say we have this code here,

4
00:00:16,430 --> 00:00:22,060
we have a console log statement but then we set a timeout and then we execute more code.

5
00:00:22,070 --> 00:00:29,330
Now the problem is setTimeout might take 2 seconds, 5 seconds, 10 seconds or maybe just 100 milliseconds

6
00:00:29,690 --> 00:00:32,870
but even 100 milliseconds would be a duration

7
00:00:32,870 --> 00:00:38,570
we probably would not want to wait because this operation could in general take longer and therefore

8
00:00:38,570 --> 00:00:45,590
block our code execution, so it prevents more code from being executed until setTimeout is done, at least

9
00:00:45,650 --> 00:00:52,080
if Javascript would treat this in the same way as it would treat all other code blocks.

10
00:00:52,220 --> 00:00:58,050
Now we of course don't have to have timers, other examples could be HTTP requests you're sending where you

11
00:00:58,050 --> 00:01:03,350
are maybe waiting for a response, something we'll have a look at in the next course module or you might

12
00:01:03,350 --> 00:01:05,090
be getting the user location,

13
00:01:05,150 --> 00:01:10,920
I scratched this when I introduced you to the navigator object earlier in the course.

14
00:01:10,940 --> 00:01:15,020
We simply have certain operations which can't be finished immediately,

15
00:01:15,020 --> 00:01:19,010
it's not just timers where we as a developer decide how long it should take,

16
00:01:19,010 --> 00:01:25,190
it's also other operations like HTTP requests or getting the user location which simply take a bit longer

17
00:01:25,340 --> 00:01:32,870
and typically you don't want to block your entire script until these operations finish because blocking

18
00:01:32,870 --> 00:01:36,980
your script would not just mean that the next line doesn't execute immediately,

19
00:01:36,980 --> 00:01:39,950
it would also mean that no other code can execute.

20
00:01:39,980 --> 00:01:45,800
So for example if you have an event listener to listen for a button click, then this handler function

21
00:01:45,830 --> 00:01:51,860
that should trigger when the button is clicked would also be blocked until the timer expired or until

22
00:01:51,860 --> 00:01:58,460
your HTTP request is done, so you would be blocking your entire page with these longer taking

23
00:01:58,460 --> 00:01:59,690
operations

24
00:01:59,690 --> 00:02:01,910
and that's of course typically not what you want,

25
00:02:01,910 --> 00:02:07,460
this operation shouldn't need to wait for the previous one for this longer taking one to finish and

26
00:02:07,460 --> 00:02:12,000
thankfully Javascript and browsers have a solution for that,

27
00:02:12,170 --> 00:02:18,540
we have asynchronous code execution. So if we take this example with the timer but really just to emphasize

28
00:02:18,540 --> 00:02:22,900
this, the same would be true if we would be working with HTTP requests for example,

29
00:02:22,940 --> 00:02:29,630
so if we have certain operations which typically take longer, then we can actually offload them to the

30
00:02:29,630 --> 00:02:30,800
browser.

31
00:02:30,800 --> 00:02:36,070
So what we do there is we hand this operation of to the browser, by calling setTimeout

32
00:02:36,080 --> 00:02:41,990
we just tell the browser to set a timer but we then let the browser do that and therefore our code can

33
00:02:41,990 --> 00:02:48,350
execute right away because now the browser is actually able to use multiple threads, one for Javascript

34
00:02:48,470 --> 00:02:56,090
and one for another task for example and therefore this timer can be managed in the browser detached from our

35
00:02:56,090 --> 00:03:02,570
running Javascript code so that our Javascript code is not blocked and the browser is responsible for

36
00:03:02,570 --> 00:03:07,970
managing the timer and the same for HTTP requests where we wait for a response or for getting a

37
00:03:07,970 --> 00:03:14,600
user location where we wait for the location, the browser takes care of these tasks, manages them in multiple

38
00:03:14,600 --> 00:03:18,200
threads and therefore our Javascript code is not blocked.

39
00:03:18,320 --> 00:03:24,040
Now the browser however needs a way for it to communicate back to our Javascript code and for that

40
00:03:24,050 --> 00:03:28,310
we typically or we often use callback functions.

41
00:03:28,310 --> 00:03:35,810
The idea here is that for example on setTimeout, we pass a callback function as a first argument if

42
00:03:35,810 --> 00:03:41,510
you remember and that callback function is the function the browser should call once the operation is

43
00:03:41,510 --> 00:03:42,210
done

44
00:03:42,320 --> 00:03:48,100
so that the browser can kind of step back into our script and execute something there

45
00:03:48,170 --> 00:03:55,850
once it's done so that we can have our script continue to run but then we're also able to do something

46
00:03:55,960 --> 00:03:58,960
once this longer taking operation is done.

47
00:03:59,030 --> 00:04:04,160
If you want to have a look at that, in this example here, I have an event listener and this is basically

48
00:04:04,250 --> 00:04:05,660
a similar thing.

49
00:04:05,660 --> 00:04:11,330
If we would have an ongoing listener, this would block the entire script execution because we would have

50
00:04:11,330 --> 00:04:14,990
to wait for does the user now click, does the user now click,

51
00:04:14,990 --> 00:04:16,520
that's not what we want to do,

52
00:04:16,520 --> 00:04:22,470
instead when we add an event listener here, we also hand this task of to the browser which manages

53
00:04:22,480 --> 00:04:24,170
these listeners behind the scenes

54
00:04:24,290 --> 00:04:30,170
so that our script execution can continue but then we have this track user handler function here which

55
00:04:30,170 --> 00:04:34,970
we pass as a second argument which effectively is this callback function,

56
00:04:34,970 --> 00:04:38,320
the function browser should call once it's done,

57
00:04:38,330 --> 00:04:44,240
so in this case not once it's done but once such a click occurs, so that the browser can always step

58
00:04:44,240 --> 00:04:50,470
back into our script execution and execute this function once a click occurs.

59
00:04:50,480 --> 00:04:57,740
So in this case here, we could simply console log clicked here and as you learned already in this course,

60
00:04:57,750 --> 00:05:00,110
this will now only execute once a click happens

61
00:05:00,110 --> 00:05:05,910
but what actually happens behind the scenes and that's what's new is that when we call this line,

62
00:05:05,930 --> 00:05:10,140
we tell the browser to set up such an event listener and in Javascript,

63
00:05:10,160 --> 00:05:11,600
we're done with it.

64
00:05:11,600 --> 00:05:14,480
We're just telling the browser which function to execute

65
00:05:14,630 --> 00:05:17,240
once this click occurs and that is it.

66
00:05:17,240 --> 00:05:21,530
So now with that if we reload this and click this button, we see clicked here,

67
00:05:21,530 --> 00:05:27,380
that's of course not unexpected but the magic happens behind the scenes where the browser manages this

68
00:05:27,380 --> 00:05:29,340
here and that's how Javascript works,

69
00:05:29,390 --> 00:05:35,930
everything you execute in code right away runs right away and it blocks other script execution until it's

70
00:05:35,930 --> 00:05:36,800
done.

71
00:05:36,800 --> 00:05:42,380
It's the browser which can help you with tasks that take longer and should not block your main thread.