1

00:00:01,470  -->  00:00:03,310
So we can search for new content.

2

00:00:03,780  -->  00:00:09,030
But it's kind of laggy when we type would be really great if we could somehow throttle how often we

3

00:00:09,030  -->  00:00:11,740
type here or how often we tick off a new search.

4

00:00:11,880  -->  00:00:16,430
We really want to be present the user with something that's super laggy when they start typing.

5

00:00:16,480  -->  00:00:21,400
And in addition it's kind of jarring to see the search term on the right updates so often.

6

00:00:21,810  -->  00:00:26,070
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

00:00:28,170  -->  00:00:29,760
to do this throttling.

8

00:00:29,850  -->  00:00:36,090
We're going to make use of a function library called Load ash load ash contains a ton of different utility

9

00:00:36,090  -->  00:00:42,930
methods one of which is called Bounce Bounce can be used to basically throttle how often a function

10

00:00:42,930  -->  00:00:43,810
is called.

11

00:00:43,920  -->  00:00:45,440
It's kind of hard to explain in words.

12

00:00:45,450  -->  00:00:49,360
So let's do an example with it and see how it works.

13

00:00:49,380  -->  00:00:51,650
The first thing we need to do is install load ash.

14

00:00:51,690  -->  00:00:54,280
It's not included with this started library right here.

15

00:00:54,450  -->  00:00:58,810
So we need to install it as a separate library using NPM.

16

00:00:58,830  -->  00:01:09,460
So over at the terminal we'll do NPM install dash dash Save Load ash.

17

00:01:09,630  -->  00:01:14,570
This will just take a second and there we go.

18

00:01:14,640  -->  00:01:21,210
Now at the very top we'll go ahead and import load ASH into this file rather than saying load ash we

19

00:01:21,210  -->  00:01:23,020
usually use an underscore.

20

00:01:23,090  -->  00:01:26,400
We're working with load dash.

21

00:01:28,580  -->  00:01:36,210
OK so now let's talk about exactly how we're going to do this.

22

00:01:36,420  -->  00:01:42,480
We have this existing function right here on search term change that takes a new search term and calls

23

00:01:42,600  -->  00:01:47,100
this video search and passes the term right on through.

24

00:01:47,250  -->  00:01:51,760
We really want to only be calling this function once every say.

25

00:01:51,960  -->  00:01:53,860
You know so many milliseconds.

26

00:01:54,000  -->  00:01:56,880
One of this is really the place we want to throttle it somehow.

27

00:01:57,240  -->  00:02:02,610
So we're going to do is we're going to pass a deep balanced version of this function right here down

28

00:02:02,610  -->  00:02:04,440
into search bar.

29

00:02:04,470  -->  00:02:05,470
Let's give it a shot.

30

00:02:05,580  -->  00:02:08,400
Well write the code out and then talk about what's going on.

31

00:02:08,490  -->  00:02:20,520
So we'll say Konst video search and it will right underscore dot disbalance which will get a term notice

32

00:02:20,520  -->  00:02:23,900
how we're going to do a fat arrow function here.

33

00:02:24,960  -->  00:02:36,220
This video search term and 300 mixture you've got the curly braces here as well as a comma.

34

00:02:36,330  -->  00:02:37,830
These are two separate arguments.

35

00:02:37,830  -->  00:02:39,320
We've got a function here.

36

00:02:39,540  -->  00:02:42,060
And then three hundred a number.

37

00:02:42,210  -->  00:02:51,570
Next we'll go ahead and pass that new video search function into this property for on search term change

38

00:02:51,580  -->  00:02:51,610
.

39

00:02:51,630  -->  00:02:52,390
So what's going on here.

40

00:02:52,410  -->  00:02:54,820
Let's talk about it.

41

00:02:55,020  -->  00:03:00,010
We created a function here a federal function and we passed it to DB outs.

42

00:03:00,060  -->  00:03:03,300
What difference does is it takes this inner function right here.

43

00:03:03,300  -->  00:03:10,710
This one that we pass and it returns a new function that can only be called once every 300 milliseconds

44

00:03:10,700  -->  00:03:10,780
.

45

00:03:10,800  -->  00:03:12,530
That's what the 300 over here is.

46

00:03:12,570  -->  00:03:15,630
It's a number in milliseconds.

47

00:03:15,630  -->  00:03:21,240
So we basically get a version of this inner function that can only be called once every 300 milliseconds

48

00:03:21,240  -->  00:03:21,270
.

49

00:03:21,270  -->  00:03:22,840
Now we can call as often as we want.

50

00:03:22,860  -->  00:03:26,070
It just won't run until 300 milliseconds have elapsed.

51

00:03:26,220  -->  00:03:31,260
So if we call it more than you we call it five times within 300 milliseconds sockets or an error or

52

00:03:31,260  -->  00:03:31,730
something.

53

00:03:31,740  -->  00:03:36,990
You know we're not going to get a crash but it's just not going to call the original function here.

54

00:03:37,080  -->  00:03:44,370
So by passing this new db bounced version a video search into search bar search bar can update as often

55

00:03:44,370  -->  00:03:45,110
as it wants.

56

00:03:45,120  -->  00:03:51,390
It can call this callback you know props start on search term change all the time call it just repeatedly

57

00:03:51,660  -->  00:03:59,340
but it's only going to run once every 300 milliseconds because this function is the only way for the

58

00:03:59,340  -->  00:04:01,830
search bar to kick off a new video search.

59

00:04:01,830  -->  00:04:07,620
It effectively means that we're saying hey you can only trigger a new search here once every 300 milliseconds

60

00:04:07,640  -->  00:04:07,960
.

61

00:04:08,250  -->  00:04:14,450
So let's go ahead and save this and we refresh and let's give it a shot.

62

00:04:14,460  -->  00:04:18,550
So I can put in cooking and that's pretty nice.

63

00:04:18,570  -->  00:04:21,650
So you can notice that while I was typing it didn't do a change.

64

00:04:21,660  -->  00:04:26,260
But as soon as I let go it went ahead and did the search.

65

00:04:26,280  -->  00:04:30,910
In addition I can say cooking and then wait for 300 milliseconds.

66

00:04:30,950  -->  00:04:41,070
They'll do a search and then keep typing with their search olive oil like so this is a great way to

67

00:04:41,490  -->  00:04:46,710
limi kind of throttle user input to make sure they don't search too often.

68

00:04:46,710  -->  00:04:50,110
This is also the same way that say Google Instant Search works.

69

00:04:50,130  -->  00:04:58,410
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

00:04:58,440  -->  00:05:04,860
that after you know I'm still typing here still going but I still have you know search results popping

71

00:05:04,860  -->  00:05:05,540
up here.

72

00:05:05,580  -->  00:05:12,320
It looks like I did a recent search for coffee scripts key interpellation let's say and there are well

73

00:05:12,360  -->  00:05:15,760
maybe not really go on Google.

74

00:05:16,380  -->  00:05:17,930
OK so I guess it only does it one time.

75

00:05:17,940  -->  00:05:23,750
But I think you get the idea anyways just because I just completed a record or the recommended search

76

00:05:23,760  -->  00:05:23,800
.

77

00:05:23,820  -->  00:05:26,400
Let's try doing a coffee maker.

78

00:05:26,400  -->  00:05:31,640
There we go in pollo.

79

00:05:31,990  -->  00:05:38,490
OK again you get the idea of a new coffee maker.

80

00:05:38,490  -->  00:05:38,910
Great.

81

00:05:39,000  -->  00:05:40,720
Just like that.

82

00:05:41,890  -->  00:05:42,630
OK cool.

83

00:05:42,660  -->  00:05:44,490
So this is pretty darn awesome.

84

00:05:44,790  -->  00:05:46,490
Let's wrap up inside the next section