The next problem that we're going to solve is making sure that we do not do an API request every single
time the user changes that text input.
It's entirely possible that a user is going to type in here very quickly.
And so we would initiate an a tremendous number of requests right here.
Way more than we need to make, though.
Let's take a look at a couple of diagrams and understand how we're going to throttle somehow the number
of requests that are being issued to, first off, a diagram of what is going on right now.
Just we can understand some following diagrams.
I'm going to show you right now we have this time axes starting up here at the very top and then going
down.
The user keeps on changing that text input.
And every single time they initiate a change to it, we are immediately doing a search.
So, again, this is currently what is happening and it's not what we want.
Let's take a look at a diagram that's going to show you what we should probably tried to do.
This is a little bit closer of what we really want to have happen inside of our app.
We want to allow a user to type inside that input as much as they please whenever they type inside there.
We are not going to medially do any kind of search.
Instead, we're going to somehow wait for about five hundred milliseconds for the user to not do any
additional input changes.
So in other words, if they type a whole bunch and then stop for about five hundred milliseconds, then
we will go ahead and do the actual search.
And so, in a very practical sense, what that would look like is if I go programming and then wait
five hundred milliseconds right there on the very end after I type that G right there, that very last
character.
That is when we would want to do one single search.
That's the goal.
That's what we would like to do.
And just, you know, this 500 milliseconds on staying right here is totally arbitrary.
This could be one hundred milliseconds or it can be one seconds.
Or it can be five seconds.
It doesn't make a difference.
Five milliseconds just seems to be kind of a reasonable amount of time to wait to do a request or do
that search.
To how Quink somehow implement this?
Well, naturally.
Let's take a look at another diagram and get a better idea of how we can implement some control mechanism
like what you see here.
All right.
So here's the idea.
Whenever a user burse types inside that input, we are going to set up a timer using the set timeout
function that is built into JavaScript.
In that set timeout function, we are going to say in 500 seconds, go and run the search function with
whatever the current term is.
That's going to occur at the very first key press.
If the user then immediately presses another character, we are then going to cancel the previous timer.
They're going to say, all right, we line up that operation to do a search in five hundred milliseconds.
But the user just pressed a character again.
So let's go back and that last search timer and set up a new timer to do a search in five and hour milliseconds.
So if we just stopped right there and we just considered those two steps 500 milliseconds after that
second key press, we would execute our search.
Let's imagine that this cycle keeps on going.
So maybe the user type something into that input.
A third time.
Very quickly at that third time, we're going to once again cancel the previous timer that we set up
and create a new timer to do search in another 500 milliseconds.
And as you can see, that entire process is going repeat over and over and over again until the user
goes for five milliseconds without typing anything in.
And at that point time, we will execute the last set timeout that was created.
That would be this one right here.
That's the general idea.
That's how we're going to approach this.
Now, putting the code together for this is just going to be a little bit confusing just because some
the syntax.
But as we start to write the code, just think back to this diagram right here.
If you understand this diagram, then you're going to understand the code that we are are about to write.
All right, so now we've got kind of a theoretical idea of what we need to do here, going to come back
in just a moment and start to write us some code to implement this system.