1 00:00:09,100 --> 00:00:11,210 Hello and welcome to another video. 2 00:00:11,380 --> 00:00:14,590 In this lesson, we are going to talk about time methods. 3 00:00:15,010 --> 00:00:22,180 The window object has two methods that allow us to delay the execution of a block of code or executed 4 00:00:22,300 --> 00:00:25,540 repetitively between an interval of time. 5 00:00:26,020 --> 00:00:33,960 So let's start with the set time out method, which is going to delay the execution of a block of code. 6 00:00:34,060 --> 00:00:40,540 So this method is part of the window object and it accepts to argument. 7 00:00:41,610 --> 00:00:45,390 So the first argument is the callback function. 8 00:00:46,900 --> 00:00:52,930 This is something that we are going to learn later in the course, but for now, let's just think of 9 00:00:52,930 --> 00:00:59,080 this as a function that's going to be executed when this method is finished. 10 00:00:59,320 --> 00:01:02,170 And when is this method going to be finished? 11 00:01:02,530 --> 00:01:03,100 When. 12 00:01:04,140 --> 00:01:10,350 This time has passed, so the second argument is going to be eight time in milliseconds. 13 00:01:10,560 --> 00:01:16,290 So if we want to wait one second, we can just put a thousand here. 14 00:01:16,470 --> 00:01:18,330 So a thousand milliseconds. 15 00:01:18,540 --> 00:01:25,860 So after one second, what's going to happen is that our callback function is going to be executed. 16 00:01:26,250 --> 00:01:32,060 So I know these names, they may sound a bit complicated, but this is actually really simple. 17 00:01:32,310 --> 00:01:36,150 So let's go to Visual Studio Code to do our first example. 18 00:01:36,240 --> 00:01:43,540 So let's just send one message to the council and then let's send the second message three seconds later. 19 00:01:43,740 --> 00:01:51,600 So here I have the first message and then for the second message, I'm just going to delete three seconds. 20 00:01:51,720 --> 00:01:53,020 So how do we do this? 21 00:01:53,400 --> 00:01:59,340 We start with the window that set time out. 22 00:01:59,850 --> 00:02:02,960 Be careful with the capital T.. 23 00:02:03,450 --> 00:02:07,700 So what I like to do so I don't get confused on how to write this. 24 00:02:08,070 --> 00:02:13,260 First, I open and close parentheses and add the semicolon. 25 00:02:13,290 --> 00:02:17,680 So this is how is the syntax of calling any method. 26 00:02:17,880 --> 00:02:20,710 So now inside here we need two arguments. 27 00:02:20,880 --> 00:02:26,460 So the first argument is going to be the function that's going to be executed at the end. 28 00:02:26,730 --> 00:02:35,430 So function open and close parentheses for the function arguments, if there are any, and open and 29 00:02:35,430 --> 00:02:41,120 close curly braces, which is where we're going to place the code inside this function. 30 00:02:41,340 --> 00:02:44,310 So we just write it like this so we don't get confused. 31 00:02:44,490 --> 00:02:48,870 And then the second argument, comma, then it's going to be the time. 32 00:02:48,880 --> 00:02:56,970 So if we want to delay three seconds, we have to write three thousand because this number is a millisecond. 33 00:02:56,980 --> 00:03:01,020 So three seconds, it's the same as three thousand milliseconds. 34 00:03:01,350 --> 00:03:01,980 All right. 35 00:03:02,340 --> 00:03:04,860 So now let's go inside this function. 36 00:03:05,100 --> 00:03:13,560 So as you can see, when you see the set time out method on the Internet, on some example out there, 37 00:03:13,860 --> 00:03:15,570 you see it written like this. 38 00:03:15,810 --> 00:03:20,030 But this could be a bit confusing if you're just starting out with this method. 39 00:03:20,160 --> 00:03:26,280 So this is why I like to write it like this first so we can understand that this is the first argument, 40 00:03:26,280 --> 00:03:27,470 which is the function. 41 00:03:27,720 --> 00:03:29,530 This is the second argument. 42 00:03:29,820 --> 00:03:36,810 So then when you get used to it, you know that inside here is just the content of that function inside 43 00:03:36,810 --> 00:03:37,020 here. 44 00:03:37,140 --> 00:03:39,720 I'm just going to send the second message. 45 00:03:42,610 --> 00:03:45,400 So now I'm going to send a message number to. 46 00:03:47,080 --> 00:03:48,130 Let's save this. 47 00:03:49,990 --> 00:03:57,700 Now refreshing the page, we can see message one and after three seconds, we can see a message to. 48 00:03:59,350 --> 00:04:07,540 Now, let's do another example, I have a spinner loader which is hidden here, if we go to the HTML 49 00:04:07,540 --> 00:04:10,270 of this page, let's just click the button. 50 00:04:10,420 --> 00:04:18,700 We can see that below this button there is an element of the idea of spinner loader that has a display 51 00:04:18,700 --> 00:04:19,210 of none. 52 00:04:19,450 --> 00:04:25,390 If I uncheck this box, we can see that it's just an element with some animation. 53 00:04:27,260 --> 00:04:33,530 And what we're going to do is just showing this element for a given number of seconds, so this is going 54 00:04:33,530 --> 00:04:36,350 to be pretty similar to what we've done here. 55 00:04:36,470 --> 00:04:44,170 And what we're going to do is just showing this element for a given number of seconds or milliseconds. 56 00:04:44,480 --> 00:04:48,820 And this is going to be pretty similar to what we've just done here. 57 00:04:49,310 --> 00:04:54,190 But the difference is that we're going to click this button to fire this function. 58 00:04:54,500 --> 00:04:58,550 So this button has the ID of Show Lowther. 59 00:05:01,060 --> 00:05:02,110 Let's copy this. 60 00:05:02,140 --> 00:05:06,760 Let's go back to Visual Studio Code, we can comment all this for now. 61 00:05:09,380 --> 00:05:11,090 And now we are going to start. 62 00:05:12,470 --> 00:05:14,180 Selecting that element. 63 00:05:17,930 --> 00:05:27,770 Which has an idea of sort of show Lowther, and we are going to create an unclick event for it so that 64 00:05:27,770 --> 00:05:32,030 unclick then there will be a function. 65 00:05:38,470 --> 00:05:45,670 And now when we click this button, what we want to do is just selecting the spinner loader, so let's 66 00:05:45,670 --> 00:05:48,180 go back there to see the ID again. 67 00:05:48,190 --> 00:05:52,980 So the idea of this loader is Spiner Loader. 68 00:05:53,770 --> 00:06:01,990 So we are just going to get this element and changed its display so we know we can use the style property 69 00:06:01,990 --> 00:06:04,990 then the name of the property, which is display. 70 00:06:07,840 --> 00:06:12,640 At the moment, we have it as non, so we are going to change it to block. 71 00:06:14,740 --> 00:06:20,920 Let's just go back there to test this out, so if we change from non to block, we can see that we just 72 00:06:20,920 --> 00:06:22,150 show the element. 73 00:06:24,160 --> 00:06:30,610 So this is what we are going to do using JavaScript and then after we showed this element, we are just 74 00:06:30,610 --> 00:06:34,560 going to delete three seconds before we hide it. 75 00:06:35,290 --> 00:06:39,550 So we are going to start a set time out method. 76 00:06:41,110 --> 00:06:47,350 So window, if you don't want to use the window, you know, you can omit the name of the object, I 77 00:06:47,380 --> 00:06:48,640 just like using it. 78 00:06:48,670 --> 00:06:50,920 So window that said time out. 79 00:06:54,120 --> 00:07:00,600 So, again, open and close parentheses semicolon inside here, two arguments. 80 00:07:00,870 --> 00:07:02,790 First one is the function. 81 00:07:04,220 --> 00:07:12,020 Second one is the number of milliseconds, so let's show the slow there for, let's say, two seconds. 82 00:07:14,500 --> 00:07:21,730 And now, after the two seconds have passed, what we need to do is just hiding it again. 83 00:07:24,350 --> 00:07:29,000 So then we are going to change the display to none again. 84 00:07:30,350 --> 00:07:33,020 Let's save this, refresh the page. 85 00:07:33,260 --> 00:07:34,440 Nothing is happening. 86 00:07:34,460 --> 00:07:36,650 I'm just going to click the button now. 87 00:07:36,650 --> 00:07:40,140 We can see the loader and after two seconds, it's gone. 88 00:07:40,430 --> 00:07:47,000 So this is used in many websites, maybe not for loaders, because loaders are just going to be hidden 89 00:07:47,000 --> 00:07:49,670 when something finishes loading. 90 00:07:50,120 --> 00:07:56,990 But I don't know if you've noticed on websites, sometimes there is an error message or some message 91 00:07:56,990 --> 00:08:00,290 saying that the changes have been saved. 92 00:08:00,470 --> 00:08:03,140 So you just see something coming from above. 93 00:08:03,960 --> 00:08:11,900 We have a message and then after a few seconds, it just gets hidden, so it is done by using the set 94 00:08:11,900 --> 00:08:12,530 time out. 95 00:08:12,650 --> 00:08:17,780 So now let's see the other method I mentioned, which is the set intervals. 96 00:08:17,780 --> 00:08:21,730 So this time it is going to be similar to the set time out. 97 00:08:21,740 --> 00:08:28,890 But the difference is that it is going to keep repeating that function forever unless we stop it. 98 00:08:29,090 --> 00:08:30,730 So let's see how this works. 99 00:08:31,010 --> 00:08:33,500 Let's go to Visual Studio Code. 100 00:08:37,880 --> 00:08:44,120 So before starting it, I'm just going to create a variable called count, which is going to be zero. 101 00:08:45,860 --> 00:08:54,690 And I'm going to write window that set, so this time it's set interval and the same thing again. 102 00:08:55,160 --> 00:09:00,590 First you open and close parentheses and add the semicolon inside here. 103 00:09:01,460 --> 00:09:03,650 We need a function and the time. 104 00:09:03,650 --> 00:09:07,720 So function open and close parentheses now the time. 105 00:09:07,970 --> 00:09:11,820 So I'm just going to keep increasing the number. 106 00:09:11,850 --> 00:09:19,370 So this is just going to work like a clock or just a counter that's going to be getting increased by 107 00:09:19,370 --> 00:09:19,860 itself. 108 00:09:19,880 --> 00:09:23,330 So for this, I'm going to use one second interval. 109 00:09:23,540 --> 00:09:26,150 So every second what I'm going to do. 110 00:09:28,080 --> 00:09:36,210 Is sending the number I have to the council and then incrementing one, so if I do this. 111 00:09:38,460 --> 00:09:42,680 And refresh the page, let's go to the council. 112 00:09:42,870 --> 00:09:51,030 As you can see, we have this thing that is just like seconds in a clock and this is going to be running 113 00:09:51,030 --> 00:09:53,010 forever until we stop it. 114 00:10:01,020 --> 00:10:03,030 So now how do we stop this? 115 00:10:07,130 --> 00:10:13,740 If you go down here, you will see that we can interrupt time methods by using variables. 116 00:10:13,970 --> 00:10:16,880 So going back to Visual Studio Code. 117 00:10:22,350 --> 00:10:25,560 When we create the set interval method. 118 00:10:26,470 --> 00:10:35,160 Instead of just doing it like this, we can assign into a variable, so I'm going to name this variable, 119 00:10:35,200 --> 00:10:37,870 I don't know, time interval. 120 00:10:40,030 --> 00:10:46,330 And I'm just going to do like this, so this is going to be executed anyway, but this time this is 121 00:10:46,330 --> 00:10:52,240 going to be assigned to this variable and this is going to be important when we want to interrupt it. 122 00:10:54,480 --> 00:11:00,870 So what we are going to do after doing the same thing we've just done, we are going to start an if 123 00:11:00,870 --> 00:11:06,320 statement here because we just want to run this up to five. 124 00:11:06,690 --> 00:11:09,570 So if the count. 125 00:11:12,780 --> 00:11:15,660 Is greater than or equal to five. 126 00:11:17,210 --> 00:11:20,610 We just want to interrupt this set interval. 127 00:11:20,630 --> 00:11:21,840 So how do we do this? 128 00:11:22,100 --> 00:11:24,740 We use another method called Clear. 129 00:11:26,240 --> 00:11:30,620 Interval, as you can see, we have clear interval and clear time out. 130 00:11:32,540 --> 00:11:35,630 So for this case, we just want to clear the interval. 131 00:11:37,370 --> 00:11:41,960 And inside parentheses, we just need to pass the name of this variable. 132 00:11:43,380 --> 00:11:49,890 So by doing this now, going back, they're refreshing the page, as you can see, we weren't on the 133 00:11:49,890 --> 00:11:52,550 page and this just kept running. 134 00:11:52,560 --> 00:11:54,990 This is just going to run forever. 135 00:11:55,770 --> 00:11:59,520 Now, if we refresh the page, it is happening again. 136 00:11:59,850 --> 00:12:02,640 So let's wait until it reaches five. 137 00:12:03,930 --> 00:12:05,240 It didn't reach five. 138 00:12:05,250 --> 00:12:13,140 It stopped at four, so as you can see, we just interrupted the set interval method and the same thing 139 00:12:13,140 --> 00:12:16,840 can be done with the set time out by using the clear timeout. 140 00:12:17,040 --> 00:12:18,000 So pretty cool. 141 00:12:18,010 --> 00:12:23,100 That was all I wanted to show you about that time out in that interval for now. 142 00:12:23,100 --> 00:12:27,810 But before we finish with this, I just left you another challenge. 143 00:12:28,080 --> 00:12:37,050 So I want you to use the date object and the set interval method to make the watch below work in real 144 00:12:37,050 --> 00:12:37,410 time. 145 00:12:37,420 --> 00:12:38,890 So I have a watch here. 146 00:12:39,060 --> 00:12:42,830 So here it's a space for the hours. 147 00:12:42,840 --> 00:12:44,510 Let's see the sides of this. 148 00:12:44,760 --> 00:12:45,900 So here we have. 149 00:12:46,660 --> 00:12:51,800 And now for the hours, an element for the minutes and the element for the second. 150 00:12:52,060 --> 00:13:00,100 So now you know how to get the actual time, the current time with the date object and you know how 151 00:13:00,100 --> 00:13:03,940 to repeat a block of code using the set interval. 152 00:13:03,980 --> 00:13:11,710 So I want you to get these two things we learned in this lesson and in the previous one and put this 153 00:13:11,710 --> 00:13:12,970 clock to work. 154 00:13:13,390 --> 00:13:18,220 So, again, take your time, try to think, how can you do this? 155 00:13:18,220 --> 00:13:21,770 And in the next video, I'm going to be back here to solve this. 156 00:13:21,820 --> 00:13:24,130 So good luck and I'll see you in the next video.