Okay, So let's take a look at the vanilla jar set up in the index HTML.
Surprise, surprise.
I have a button with a class of BTN and I have text click me.
And then as far as the logic, I select a button with a query selector, I add event listener.
I'm listening for click events and then everytime the event fires off there's console.log you clicked
me.
Let me make this very clear.
There's nothing tricky about this setup.
There's probably the most straightforward button that you have seen in any of the tutorials.
Here's the goal, though.
We want to set up the delay logic where we run this functionality.
In this case console.log you click me only 2 seconds after the last click.
So let's say I clicked 20 times and only after that last click we set up that console.log.
So that's the goal.
How we can start moving in the right direction.
Well, we could come up with a callback function, right?
It's not going to be surprising if I'll call this the bounce.
So say the bounce, That's my function.
And in here I also right away can set up the set timeout that's in the API where we can use that timeout.
We pass in a callback function and in how long the functionality is going to run.
So let's write a way to do that.
I'm going to go to timeout.
Like I said, it's looking for two things.
The callback function.
In our case, that's going to be our console.log and then in how long it's going to run.
So let's say in here I'm going to go with 2 seconds.
The value is in the milliseconds.
That's why we need to go with 2000.
And let me grab this console.log, set it up over here.
And then instead of anonymous callback function, we're going to go with the bounce and I save here.
And some of the logic makes sense, but we're still not there yet.
So yeah, things are happening with delay, but notice if I click seven times, pretty much I have seven
control logs.
And again, that's not our goal.
I only want one log after my last click.
And I'm sorry if I keep repeating this, but hopefully this will help you to kind of connect the dots
of what we're trying to achieve over here in our job application.
So what changes can we implement?
Well, with timeout, we can return the ID, so every time we run set timeout we actually return ID.
And we can use that ID to clear the time out.
See we're moving in the right direction.
You can already see that.
Basically what we want to do is cancel that previous timeout on that last button.
Click.
So let's see how it works.
First I'm going to go with const and then timeout.
All righty.
I'll set it equal to basically set the amount.
You know, I can actually move this up, so let me set it here.
That's equal to set timeout.
That's the idea that we're getting back.
If you want, we can log that sucker.
So let's say here, time out I.D., and then let's clear it.
Clear timeout.
This is what we need to pass in timeout.
And then lastly, let's just see that we have click the button.
Otherwise you might be thinking, okay, he's just messing with me.
He's actually not clicking the button.
So let's go with Hello.
So now what?
You'll see we won't have any logs in a console that are coming from the set timeout because we will
clear.
However, we'll be still clicking the button.
So notice I keep clicking.
So these are those IDs, those timeout IDs.
As you can see, it's increasing.
So automatically JavaScript will start with, let's say zero or one, I don't remember.
And then the number is going to keep on increasing so each and every time.
We'll get a new ID now right away.
Cancel it right away.
Cancel that set time.
That's why we don't see any.
You clicked me.
We just see the hello.
Which means that we are clicking the button.
But of course, we're cancelling right away this time out.
So now let's put everything together and I'll throw you a grenade.
See, what we could do with the bonds is actually return another function.
Uh, in that function, we'll do two things.
We'll clear out the previous timeout and we'll set up a new one.
So let's start by just invoking the bounce.
But when we need to keep in mind, since we evoke this immediately, basically when our application
loads.
We need to return from this bounce.
A new function.
Otherwise, none of this makes sense.
Basically, we'll just run this code.
That's it.
We'll run it once.
We'll just have one and all.
That's it.
Because again, now we're not invoking this on every click.
We invoke this.
Basically when the application loads so first.
Let's go with the return and return to function.
So now from the bounce, we return this function, and now this function will be invoked.
So again, we come back to the same logic where we have those hellos and then we're clearing out the
timeout.
But here's what we want to do.
I want to remove this.
Well, you know what?
I'll leave these ones out.
Remove that halo over here, and we want to construct that time out ID the first time we run this the
bounds on that initial.
Load.
So we're going to go here with timeout ID.
However, I'm going to use LET since we'll update that in a second.
So let me remove the const here.
Let me set up tea time out here.
Over here.
So?
So we create this new variable, and then what we're going to do.
We'll clear out the previous timeout and we'll set up a new one.
So let me move these two suckers up over here.
So I have console.log time out already and then I'll set this one equal to the new timeout.
So yes, there was a little bit of refactoring.
So let me go over this code.
So once the application loads, we run the bounce just one time we run it.
We set up here this variable.
Time out.
Ready?
And here I just have extra console.log where I basically say, okay, what is the value for timeout
ID?
The first thing we do.
With this function that we return is clear out the previous one, whatever it was, and then we set
up the new one.
And we just come up with that set timeout.
And what you'll notice as a result.
Now, let's say if I click 20 times.
Notice how the ID is changing, but only after the last one.
I have this.
You clicked me again.
I invoked this one once.
Once the application loads from that bounce, I return a new function and I set up the variable.
And pretty much every time I'll click on a button, I'll clear out the previous one.
And I'll set up the new one.
And as long as those clicks are happening in those 2 seconds or whatever time we have over here in this
time frame, we'll be clearing out the last one and then setting up the new one, clearing out the last
one, setting up the new one.
And I can click, I don't know, 10,000 times.
And again, the log is going to happen only after the last click.
And of course, we can make this.
More dynamic, for example.
I could set up the bounce to accept a function.
And pass the logic in here.
Also, as a side note, we can pass in in how long it's going to run as well.
We can essentially set this one up as a variable, but I'm just going to go with this console.log or
basically I'll remove it here.
So now notice I'm passing this into the bounds.
Then I'll set up as a function and invoke it over here.
Like I said, we can make this more complex.
That's really is not the point though here.
Our main logic was to delay some functionality, which successfully we're doing.
So let me click here and check it out.
Now, of course, we wait for 2 seconds and after the last click.
That's where we get the console log.
And as you can see, this is what we'll do in our application.
User is going to be typing.
And after that last keystroke, that's when we all set up wheels in motion and we'll fetch that request.
Because if you remember previously, when we were originally setting up the search, the problem was
as we were typing, since we were updating that state variable, we were firing off those events, we
were fetching for the data.
And in order to avoid that, we kind of waited for is loading.
So at the moment notice now I cannot type.
I basically need to wait for that fetch request to complete.
So now what we'll do?
We all set up the functionality that delays that fresh request, but we're not going to be kind of restricting
the user to wait for that fetch to complete.
We'll just be waiting for the typing to be complete.