1
00:00:00,500 --> 00:00:06,850
The January callback function ensures that all javascript statements are executed line by line without

2
00:00:06,850 --> 00:00:08,290
a callback function.

3
00:00:08,290 --> 00:00:13,310
It's possible that one line of code is run without the completion of the previous line.

4
00:00:13,330 --> 00:00:18,380
This can create errors especially when dealing with multiple animation sequences.

5
00:00:18,400 --> 00:00:20,890
Let's take a look at an example.

6
00:00:21,040 --> 00:00:24,520
Here we have a script that hides an element with the click of a button

7
00:00:32,590 --> 00:00:34,570
once the element is hidden.

8
00:00:34,570 --> 00:00:37,930
An alert appears.

9
00:00:37,950 --> 00:00:44,700
Note that the alert only appears once the height animation event has completed.

10
00:00:44,700 --> 00:00:50,560
This is an example of an animation that uses the callback function will run that script one more time

11
00:00:51,770 --> 00:00:53,770
once we clicked the hide button.

12
00:00:53,770 --> 00:01:09,240
The square disappears in the alert pops up.

13
00:01:09,240 --> 00:01:17,780
This here is the syntax for the callback function it's simply the word function with an open and close

14
00:01:17,780 --> 00:01:18,200
bracket.

15
00:01:21,030 --> 00:01:25,050
Let's see what would happen if we did not have the callback function in place

16
00:01:30,590 --> 00:01:36,370
so we remove the callback function and we'll refresh the page.

17
00:01:36,420 --> 00:01:47,360
Now when we put the hide button the alert appears instantly and at the same time the square disappears.

18
00:01:47,360 --> 00:01:53,420
So you can see that both events occur simultaneously which is undesirable.

19
00:01:53,420 --> 00:01:54,440
You typically want

20
00:01:57,180 --> 00:02:01,400
each event to execute one after the other.

21
00:02:01,500 --> 00:02:07,350
And for that reason the callback function is is quite important and very often used.