Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,280 --> 00:00:07,260
Now, let's tackle the problem, kind of a problem, I guess, Dad, we're sending a request for every
2
00:00:07,260 --> 00:00:11,670
keystroke, we might not want to do that because we're spamming our server with requests.
3
00:00:11,670 --> 00:00:18,510
If we do that, so would probably be better if we set some timer and if the timer expired, we check
4
00:00:18,510 --> 00:00:24,690
if the current input in this will input here is the same as at the beginning of the timer and only if
5
00:00:24,690 --> 00:00:25,800
it's the same.
6
00:00:25,800 --> 00:00:31,150
We know that there has been a pause and the user passed typing and therefore we probably want to send
7
00:00:31,150 --> 00:00:31,860
the request.
8
00:00:32,490 --> 00:00:33,450
Not clear what I mean.
9
00:00:33,780 --> 00:00:34,710
Well, let me show you.
10
00:00:34,950 --> 00:00:36,150
Here is our effect.
11
00:00:37,200 --> 00:00:42,810
And in the end here, we're fetching data now at the beginning of the fact will now actually use set
12
00:00:42,810 --> 00:00:47,460
time out, which is a normal JavaScript function, has nothing to do with Hoke's, of course, to set
13
00:00:47,460 --> 00:00:52,380
a timer and let's say the timer is 500 milliseconds and you can use any value you want.
14
00:00:52,800 --> 00:00:57,180
Now, want to wait for the user to pause typing for 500 milliseconds.
15
00:00:57,180 --> 00:00:59,760
And only if that happened, I want to send the request.
16
00:00:59,770 --> 00:01:04,860
So in this anonymous function passing here as a first argument to set time out, which is the function
17
00:01:04,860 --> 00:01:09,140
it executes after five hundred milliseconds there, I want to send that request.
18
00:01:09,140 --> 00:01:14,940
So I'll move all that logic for constructing the query and sending that request into that set timeout
19
00:01:14,940 --> 00:01:15,400
function.
20
00:01:15,900 --> 00:01:17,940
So that will happen after 500 milliseconds.
21
00:01:18,930 --> 00:01:22,820
Right now, of course, we're only deferring this where we're not really doing anything else.
22
00:01:22,830 --> 00:01:28,620
Instead, we'll have to make sure that that we also check after these five hundred milliseconds.
23
00:01:28,620 --> 00:01:30,770
So instead of the function, we passed a set timeout.
24
00:01:31,050 --> 00:01:38,390
If entered value entered filter is the same as the entered value five hundred milliseconds ago.
25
00:01:39,090 --> 00:01:41,100
And how can we do that for that?
26
00:01:41,100 --> 00:01:47,430
It's important to understand how closures work in JavaScript entered filters here will actually be locked
27
00:01:47,430 --> 00:01:48,750
in when we set the timer.
28
00:01:49,050 --> 00:01:53,340
So it will not be the value the user has entered after this timer expired.
29
00:01:53,610 --> 00:01:56,870
It will be the value the user entered when we set this timer.
30
00:01:57,030 --> 00:01:57,740
That's important.
31
00:01:57,750 --> 00:01:58,920
That's how JavaScript works.
32
00:01:59,040 --> 00:02:02,550
So entered filter here will not be the current value to user entered.
33
00:02:02,820 --> 00:02:09,210
It will be the old value 500 milliseconds ago, basically when you effect executed and when we then
34
00:02:09,210 --> 00:02:10,370
set the timer four.
35
00:02:10,620 --> 00:02:15,270
So that's what entered filter will be will not be the current input of the old one, so to say.
36
00:02:16,170 --> 00:02:22,800
Now, I also need to turn to one to compare what's currently Indian put with what the user entered 500
37
00:02:22,800 --> 00:02:27,720
milliseconds ago and only if it's the same I know, OK, seems to be the value the user wants to go
38
00:02:27,720 --> 00:02:28,110
with.
39
00:02:28,110 --> 00:02:29,930
At least the user paused, typing.
40
00:02:29,940 --> 00:02:33,930
So now is the time to send the HDP request, so we need to compare it.
41
00:02:33,930 --> 00:02:36,840
But how do we get to current value?
42
00:02:37,740 --> 00:02:43,740
Will we get that current value with something you also learned about in this course with a ref?
43
00:02:43,740 --> 00:02:44,520
A reference?
44
00:02:45,670 --> 00:02:52,180
For that react also has a hook use ref, this allows us to create a reference simply by calling use
45
00:02:52,180 --> 00:02:56,930
ref and you can store it isn't a concern, let's say the input ref just like that.
46
00:02:57,610 --> 00:03:03,760
You can assign this to a DOM element by simply going to the element and our and put here and there at
47
00:03:03,760 --> 00:03:09,620
the ref property, the ref Propp, a special prop supported by react and pointed input ref.
48
00:03:10,120 --> 00:03:16,900
Now we established a connection between this input here, the input element and the input ref variable
49
00:03:16,900 --> 00:03:17,920
or constant up here.
50
00:03:18,830 --> 00:03:20,780
We can now use this year and compare it.
51
00:03:21,710 --> 00:03:29,030
Input Reath current, Mr. Element current is a property the ref simply has this ref object simply has
52
00:03:29,510 --> 00:03:30,640
this will be an input element.
53
00:03:30,650 --> 00:03:32,450
Therefore here we can check the value.
54
00:03:33,400 --> 00:03:39,220
If that value and that will be the current value because input ref is defined outside of the closure,
55
00:03:39,230 --> 00:03:41,500
so that's not locked in or anything like that.
56
00:03:41,630 --> 00:03:44,230
So that's the current value currently entered into input.
57
00:03:44,530 --> 00:03:50,620
If death's the same as the entered value when we set the timer, then we know the value hasn't changed
58
00:03:50,620 --> 00:03:51,190
in between.
59
00:03:51,190 --> 00:03:54,120
Or at least it's now the same as it was at the beginning of the timer.
60
00:03:54,550 --> 00:03:55,840
So it's actually there.
61
00:03:56,110 --> 00:03:58,150
And hence I'll cut this one more time.
62
00:03:58,480 --> 00:04:03,340
It's actually there instead of this if statement where we want to construct that Koreans sent the request.
63
00:04:04,800 --> 00:04:06,060
Now, one important note here.
64
00:04:07,450 --> 00:04:15,210
Input reath there for now, of course, awls is a dependency of our effect here because I'm using input
6582
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.