1
00:00:00,420 --> 00:00:05,370
One of the questions that I hear from time to time is to write to the bones function.

2
00:00:05,640 --> 00:00:11,490
And if you don't know what is to bones, it means that the function will be called on after a certain

3
00:00:11,490 --> 00:00:17,040
period of time, which actually means every single call of this function will be delayed.

4
00:00:20,340 --> 00:00:22,590
So how can we implement this function?

5
00:00:22,770 --> 00:00:26,190
First of all, we must create a function that we've one to the bones.

6
00:00:26,400 --> 00:00:30,210
So here I want to create a function, for example, save input.

7
00:00:30,480 --> 00:00:32,910
And here we are providing inside our name.

8
00:00:33,240 --> 00:00:39,300
So the idea is that inside we will simply console.log something and we can see the dysfunction is working.

9
00:00:39,300 --> 00:00:41,370
So here receive input and name.

10
00:00:41,700 --> 00:00:46,740
And we're using the bones function, for example, when we want to send some information to the bacon.

11
00:00:47,040 --> 00:00:53,010
So user is typing something in the input field and we want to wait, for example, 200 milliseconds

12
00:00:53,010 --> 00:00:57,120
or two seconds after person will stop typing something in the input.

13
00:00:57,390 --> 00:01:02,850
In this case, were both sent to the beacon, just a single request to check the validation and not

14
00:01:02,850 --> 00:01:05,220
a lot of requests after every single letter.

15
00:01:05,490 --> 00:01:11,610
This is exactly why we need a T-bones, so we have our save input function and number one to call it

16
00:01:11,610 --> 00:01:12,180
the bones.

17
00:01:12,390 --> 00:01:14,790
For example, let's name it, process change.

18
00:01:15,150 --> 00:01:18,960
And here we want to use a T-bones function that we will create in the second.

19
00:01:19,350 --> 00:01:22,030
And inside, we must provide first of follow a function.

20
00:01:22,050 --> 00:01:25,770
This is to have input and secondly, delay, for example, two seconds.

21
00:01:26,130 --> 00:01:32,070
After this, we can simply call process change resistor in full and actually doesn't matter how many

22
00:01:32,070 --> 00:01:33,840
times we will call this function.

23
00:01:33,850 --> 00:01:37,620
The main idea it will be called on the once after two seconds.

24
00:01:37,950 --> 00:01:43,410
So here I want to register new function Dupont's, and here we get in as an argument.

25
00:01:43,410 --> 00:01:45,960
First of all, some function, let's name it func.

26
00:01:46,200 --> 00:01:52,500
And secondly, our timeout and it is a nice approach to set timeout by default, for example, to 300

27
00:01:52,500 --> 00:01:53,190
milliseconds.

28
00:01:53,400 --> 00:01:56,040
This means that it is not mandatory to provide.

29
00:01:56,610 --> 00:02:02,460
And now inside our dearborn's function must return the function because as you can see here, where

30
00:02:02,460 --> 00:02:09,180
Colin de Bond's function and process change is also a function of where inside we can provide some data

31
00:02:09,300 --> 00:02:15,270
for our save input function, which actually means here we must return new function.

32
00:02:15,300 --> 00:02:17,760
And here we want to spread our args.

33
00:02:18,120 --> 00:02:19,760
And let's check what we're getting.

34
00:02:20,140 --> 00:02:27,720
So here I want to console.log in a function comma args and we can see in what format we are getting

35
00:02:27,720 --> 00:02:28,010
them.

36
00:02:28,020 --> 00:02:32,610
I am related in the page, as you can see where I get in four times because we called this function

37
00:02:32,610 --> 00:02:34,380
four times in a function.

38
00:02:34,530 --> 00:02:37,030
And here we have just a single argument for.

39
00:02:37,410 --> 00:02:42,400
But this spread with ARGs transformed our arguments to an array.

40
00:02:42,630 --> 00:02:45,150
Because for us, it's easier to work with the array.

41
00:02:45,570 --> 00:02:51,780
The second thing that we want to do is create time and actually time if we want to store in the closure

42
00:02:51,780 --> 00:02:52,710
here on the top.

43
00:02:52,950 --> 00:02:57,280
So here we can just write let timer without any default value.

44
00:02:57,540 --> 00:03:03,060
And now inside our inner function after our console.log would just want to write set timeout.

45
00:03:03,300 --> 00:03:05,130
And here we will have a function.

46
00:03:05,490 --> 00:03:12,000
And actually the second parameter here will be our timeout after what time we will call this code inside.

47
00:03:12,360 --> 00:03:15,570
And what we want to do here is func not apply.

48
00:03:15,840 --> 00:03:19,350
Here will be this comma asks What does it even mean?

49
00:03:19,500 --> 00:03:21,540
So we use here our dearborn's function.

50
00:03:21,750 --> 00:03:23,810
And here we are, providing our save input.

51
00:03:23,820 --> 00:03:24,840
It's our function.

52
00:03:25,170 --> 00:03:26,640
And here is our timeout.

53
00:03:26,940 --> 00:03:33,180
So at this moment, this protest change is this in the function and after work column, this function

54
00:03:33,180 --> 00:03:34,410
work calling this part.

55
00:03:34,770 --> 00:03:36,480
And here we're getting our arguments.

56
00:03:36,480 --> 00:03:38,250
In our case, this is a ray was full.

57
00:03:38,460 --> 00:03:44,460
Here we have our console.log and this will generate a timeout, which actually means every single line

58
00:03:44,460 --> 00:03:49,290
here when we call this function will generate a set timeout with this timeout.

59
00:03:49,650 --> 00:03:53,460
What we are doing inside were Colin Func, so we're calling this saving.

60
00:03:53,460 --> 00:04:01,020
But with apply this args, which actually means we want to call this function after timeout with the

61
00:04:01,020 --> 00:04:05,280
correct context, with the context of this function and with this arguments.

62
00:04:05,550 --> 00:04:08,160
But here we have a problem when we're allowed the page.

63
00:04:08,370 --> 00:04:13,830
As you can see, we're getting four times in a function and after two seconds, budget and save input

64
00:04:13,830 --> 00:04:15,060
for four times.

65
00:04:15,300 --> 00:04:20,730
And this is wrong because here we must get it on once because this is actually the bones.

66
00:04:21,030 --> 00:04:27,420
So we must clear our timer every single time when we make a call to the function, because in this case,

67
00:04:27,420 --> 00:04:29,880
our previous set timeout must be ignored.

68
00:04:30,120 --> 00:04:34,100
And exactly for this we created here let timeout what we can do here.

69
00:04:34,110 --> 00:04:36,760
We can assign set timeout to the timer.

70
00:04:36,960 --> 00:04:39,780
And actually, if you don't know a timeout, give us back.

71
00:04:39,780 --> 00:04:43,860
And no, and this is our specific idea that we can clean.

72
00:04:44,160 --> 00:04:50,520
This is why, before our timer, we can now right clear timeout and inside we can provide our timer.

73
00:04:50,730 --> 00:04:52,560
If it's undefined, it doesn't matter.

74
00:04:52,560 --> 00:04:53,730
It won't do anything.

75
00:04:53,940 --> 00:04:58,050
But if we have an idea, then previous set timeout will be destroyed.

76
00:04:58,350 --> 00:05:04,200
In this case, every single time when a called this function again, all previous timeouts will be aborted

77
00:05:04,380 --> 00:05:06,660
and now we will create a new set timeout.

78
00:05:06,840 --> 00:05:09,480
And after this time, we will call our function.

79
00:05:09,690 --> 00:05:13,350
This is exactly the idea of a T-bones knowledge to load the page.

80
00:05:13,530 --> 00:05:18,930
We're getting in the function of four times and now we're getting save input for just once.

81
00:05:19,210 --> 00:05:24,190
After two seconds, and this is exactly what we wanted when we implemented our bonds.

82
00:05:24,460 --> 00:05:30,130
So once again, the bonds function allow us to call something only once after specific time.

83
00:05:30,310 --> 00:05:35,500
And this is really important when we're talking about something that the user can call a lot of times

84
00:05:35,710 --> 00:05:37,930
during inputting in the phone, for example.