1 00:00:01,460 --> 00:00:03,570 To set up this cascading timer of sorts. 2 00:00:03,590 --> 00:00:07,910 We're going to first write in some code that is going to just set up a timer to do the search in five 3 00:00:07,910 --> 00:00:08,780 hundred milliseconds. 4 00:00:09,320 --> 00:00:11,660 Right now, we're not going to worry about the cancelling action. 5 00:00:12,090 --> 00:00:16,310 So we're still going on the same behavior as before where every single key press results in a search. 6 00:00:16,400 --> 00:00:18,950 They will just all be lagged by five hundred milliseconds. 7 00:00:19,490 --> 00:00:24,020 Once we get this code together, we'll then start to discuss how to add in that cancel step. 8 00:00:25,070 --> 00:00:26,610 All right, so back inside my code editor. 9 00:00:26,900 --> 00:00:28,490 Fortunately, this can be really easy. 10 00:00:28,850 --> 00:00:35,360 All we have to do is find a if term right here where we do our search and we can either wrap just the 11 00:00:35,360 --> 00:00:39,140 search statement or we can wrap the entire thing right here. 12 00:00:39,290 --> 00:00:43,100 The entire statement inside of a set time out right now. 13 00:00:43,130 --> 00:00:44,570 We will wrap the entire thing. 14 00:00:45,070 --> 00:00:46,490 I'm going to put in a set time out. 15 00:00:49,120 --> 00:00:51,030 I'm going to move the if statement inside their. 16 00:00:53,630 --> 00:00:57,630 And then after it all, put in a five hundred millisecond timer. 17 00:00:59,380 --> 00:01:03,900 So we can now save this to flip back over and do a quick test. 18 00:01:04,860 --> 00:01:11,640 If I now delete programming, I then put in programming, everything is lagged by five or milliseconds. 19 00:01:12,480 --> 00:01:13,560 That really is step one. 20 00:01:13,710 --> 00:01:18,810 As simple as it sounds now, all we have to do is make sure that any time there is an additional input 21 00:01:18,810 --> 00:01:21,540 change, we cancel the previous timer. 22 00:01:22,520 --> 00:01:25,370 Now, as a quick aside, how do we cancel a set time out in general? 23 00:01:25,460 --> 00:01:29,150 Let's just discuss that separately very quickly inside my council. 24 00:01:31,290 --> 00:01:33,480 I'm going to write out a quick set Time-Out statement. 25 00:01:38,570 --> 00:01:43,760 Inside, if you're all do a console log of hi there and I'm going to try to delay it by how about 10 26 00:01:43,760 --> 00:01:46,580 seconds, so I'll put in ten thousand milliseconds. 27 00:01:47,270 --> 00:01:53,170 And whenever you create a time out using set time out, you get back a number or an integer like 116. 28 00:01:54,020 --> 00:01:56,990 This is an identifier that identifies the timer. 29 00:01:57,020 --> 00:02:01,520 That was just created before that timer times out or completes. 30 00:02:01,820 --> 00:02:02,960 So there did right there. 31 00:02:03,380 --> 00:02:08,840 We have the opportunity to cancel this timer by making use of another built in function or a function 32 00:02:08,840 --> 00:02:10,190 that is built into JavaScript. 33 00:02:10,730 --> 00:02:11,810 It's going to create another timer. 34 00:02:11,950 --> 00:02:18,110 I'm going gonna get a new identifier and I'm going to very quickly call your timeout and pass in that 35 00:02:18,110 --> 00:02:18,950 one one seven. 36 00:02:19,960 --> 00:02:23,530 By calling clear timeout, we are cancelling this timeout right here. 37 00:02:23,980 --> 00:02:28,480 And even after ten seconds, that arrow function right there is not going to be invoked. 38 00:02:29,690 --> 00:02:33,680 The key thing to remember here is that whenever he calls that time out, we get back in identifier. 39 00:02:34,160 --> 00:02:37,490 We can use that idea right there to stop the timer from executing. 40 00:02:38,570 --> 00:02:40,370 That we think about that back inside of our code. 41 00:02:40,940 --> 00:02:42,860 We cannot take this set time out statement. 42 00:02:44,040 --> 00:02:48,430 Maybe a sign, the result of it to a variable called something like I'm out ideas. 43 00:02:48,650 --> 00:02:49,670 I think that sounds reasonable. 44 00:02:50,680 --> 00:02:54,580 And then at some point in time in the future, we can attempt to clear our time out. 45 00:02:54,700 --> 00:02:56,830 Making use of the clear timeout function. 46 00:02:57,160 --> 00:02:58,750 All we do is pass in that I.D.. 47 00:02:59,930 --> 00:03:05,090 Now, here's the next big question, next big question is how are we going to somehow get that timer 48 00:03:05,120 --> 00:03:09,650 or seeing that I.D. and cancel it the next time a user type something in? 49 00:03:10,490 --> 00:03:12,740 Well, there's definitely one way you might think to do this. 50 00:03:12,770 --> 00:03:14,360 You might think, yeah, no problem. 51 00:03:14,630 --> 00:03:18,050 Let's just create a new piece of state and keep track of that time out I.D.. 52 00:03:18,440 --> 00:03:20,510 That's definitely one way we could accomplish this. 53 00:03:20,840 --> 00:03:25,630 But there is a slightly better way making use of the use, in fact, hook. 54 00:03:26,460 --> 00:03:27,440 Let's take a pause right here. 55 00:03:27,530 --> 00:03:31,250 When come back, we're going to talk about another feature of the use effect took.