So we can search for new content. 2
But it's kind of laggy when we type would be really great if we could somehow throttle how often we 3
type here or how often we tick off a new search. 4
We really want to be present the user with something that's super laggy when they start typing. 5
And in addition it's kind of jarring to see the search term on the right updates so often. 6
So if we could just kind of throttle it a little bit I think we'd be in a pretty good pretty good spot 7
to do this throttling. 8
We're going to make use of a function library called Load ash load ash contains a ton of different utility 9
methods one of which is called Bounce Bounce can be used to basically throttle how often a function 10
is called. 11
It's kind of hard to explain in words. 12
So let's do an example with it and see how it works. 13
The first thing we need to do is install load ash. 14
It's not included with this started library right here. 15
So we need to install it as a separate library using NPM. 16
So over at the terminal we'll do NPM install dash dash Save Load ash. 17
This will just take a second and there we go. 18
Now at the very top we'll go ahead and import load ASH into this file rather than saying load ash we 19
usually use an underscore. 20
We're working with load dash. 21
OK so now let's talk about exactly how we're going to do this. 22
We have this existing function right here on search term change that takes a new search term and calls 23
this video search and passes the term right on through. 24
We really want to only be calling this function once every say. 25
You know so many milliseconds. 26
One of this is really the place we want to throttle it somehow. 27
So we're going to do is we're going to pass a deep balanced version of this function right here down 28
into search bar. 29
Let's give it a shot. 30
Well write the code out and then talk about what's going on. 31
So we'll say Konst video search and it will right underscore dot disbalance which will get a term notice 32
how we're going to do a fat arrow function here. 33
This video search term and 300 mixture you've got the curly braces here as well as a comma. 34
These are two separate arguments. 35
We've got a function here. 36
And then three hundred a number. 37
Next we'll go ahead and pass that new video search function into this property for on search term change 38
. 39
So what's going on here. 40
Let's talk about it. 41
We created a function here a federal function and we passed it to DB outs. 42
What difference does is it takes this inner function right here. 43
This one that we pass and it returns a new function that can only be called once every 300 milliseconds 44
. 45
That's what the 300 over here is. 46
It's a number in milliseconds. 47
So we basically get a version of this inner function that can only be called once every 300 milliseconds 48
. 49
Now we can call as often as we want. 50
It just won't run until 300 milliseconds have elapsed. 51
So if we call it more than you we call it five times within 300 milliseconds sockets or an error or 52
something. 53
You know we're not going to get a crash but it's just not going to call the original function here. 54
So by passing this new db bounced version a video search into search bar search bar can update as often 55
as it wants. 56
It can call this callback you know props start on search term change all the time call it just repeatedly 57
but it's only going to run once every 300 milliseconds because this function is the only way for the 58
search bar to kick off a new video search. 59
It effectively means that we're saying hey you can only trigger a new search here once every 300 milliseconds 60
. 61
So let's go ahead and save this and we refresh and let's give it a shot. 62
So I can put in cooking and that's pretty nice. 63
So you can notice that while I was typing it didn't do a change. 64
But as soon as I let go it went ahead and did the search. 65
In addition I can say cooking and then wait for 300 milliseconds. 66
They'll do a search and then keep typing with their search olive oil like so this is a great way to 67
limi kind of throttle user input to make sure they don't search too often. 68
This is also the same way that say Google Instant Search works. 69
So if I open a new tab here go to Google dot com and let's say I want to learn about coffee you'll see 70
that after you know I'm still typing here still going but I still have you know search results popping 71
up here. 72
It looks like I did a recent search for coffee scripts key interpellation let's say and there are well 73
maybe not really go on Google. 74
OK so I guess it only does it one time. 75
But I think you get the idea anyways just because I just completed a record or the recommended search 76
. 77
Let's try doing a coffee maker. 78
There we go in pollo. 79
OK again you get the idea of a new coffee maker. 80
Great. 81
Just like that. 82
OK cool. 83
So this is pretty darn awesome. 84
Let's wrap up inside the next section