One of the questions that I hear from time to time is to write to the bones function.
And if you don't know what is to bones, it means that the function will be called on after a certain
period of time, which actually means every single call of this function will be delayed.
So how can we implement this function?
First of all, we must create a function that we've one to the bones.
So here I want to create a function, for example, save input.
And here we are providing inside our name.
So the idea is that inside we will simply console.log something and we can see the dysfunction is working.
So here receive input and name.
And we're using the bones function, for example, when we want to send some information to the bacon.
So user is typing something in the input field and we want to wait, for example, 200 milliseconds
or two seconds after person will stop typing something in the input.
In this case, were both sent to the beacon, just a single request to check the validation and not
a lot of requests after every single letter.
This is exactly why we need a T-bones, so we have our save input function and number one to call it
the bones.
For example, let's name it, process change.
And here we want to use a T-bones function that we will create in the second.
And inside, we must provide first of follow a function.
This is to have input and secondly, delay, for example, two seconds.
After this, we can simply call process change resistor in full and actually doesn't matter how many
times we will call this function.
The main idea it will be called on the once after two seconds.
So here I want to register new function Dupont's, and here we get in as an argument.
First of all, some function, let's name it func.
And secondly, our timeout and it is a nice approach to set timeout by default, for example, to 300
milliseconds.
This means that it is not mandatory to provide.
And now inside our dearborn's function must return the function because as you can see here, where
Colin de Bond's function and process change is also a function of where inside we can provide some data
for our save input function, which actually means here we must return new function.
And here we want to spread our args.
And let's check what we're getting.
So here I want to console.log in a function comma args and we can see in what format we are getting
them.
I am related in the page, as you can see where I get in four times because we called this function
four times in a function.
And here we have just a single argument for.
But this spread with ARGs transformed our arguments to an array.
Because for us, it's easier to work with the array.
The second thing that we want to do is create time and actually time if we want to store in the closure
here on the top.
So here we can just write let timer without any default value.
And now inside our inner function after our console.log would just want to write set timeout.
And here we will have a function.
And actually the second parameter here will be our timeout after what time we will call this code inside.
And what we want to do here is func not apply.
Here will be this comma asks What does it even mean?
So we use here our dearborn's function.
And here we are, providing our save input.
It's our function.
And here is our timeout.
So at this moment, this protest change is this in the function and after work column, this function
work calling this part.
And here we're getting our arguments.
In our case, this is a ray was full.
Here we have our console.log and this will generate a timeout, which actually means every single line
here when we call this function will generate a set timeout with this timeout.
What we are doing inside were Colin Func, so we're calling this saving.
But with apply this args, which actually means we want to call this function after timeout with the
correct context, with the context of this function and with this arguments.
But here we have a problem when we're allowed the page.
As you can see, we're getting four times in a function and after two seconds, budget and save input
for four times.
And this is wrong because here we must get it on once because this is actually the bones.
So we must clear our timer every single time when we make a call to the function, because in this case,
our previous set timeout must be ignored.
And exactly for this we created here let timeout what we can do here.
We can assign set timeout to the timer.
And actually, if you don't know a timeout, give us back.
And no, and this is our specific idea that we can clean.
This is why, before our timer, we can now right clear timeout and inside we can provide our timer.
If it's undefined, it doesn't matter.
It won't do anything.
But if we have an idea, then previous set timeout will be destroyed.
In this case, every single time when a called this function again, all previous timeouts will be aborted
and now we will create a new set timeout.
And after this time, we will call our function.
This is exactly the idea of a T-bones knowledge to load the page.
We're getting in the function of four times and now we're getting save input for just once.
After two seconds, and this is exactly what we wanted when we implemented our bonds.
So once again, the bonds function allow us to call something only once after specific time.
And this is really important when we're talking about something that the user can call a lot of times
during inputting in the phone, for example.