WEBVTT 00:00:08.670 --> 00:00:11.520 In this video you're going to learn swimming events. 00:00:11.700 --> 00:00:14.090 So what do we mean by timing events. 00:00:14.370 --> 00:00:22.800 Imagine because we would like to run a piece of code over and over at a specified time intervals. 00:00:22.830 --> 00:00:31.410 So for example we can have a counter that will increase by one every second. 00:00:31.780 --> 00:00:32.420 OK. 00:00:32.670 --> 00:00:34.990 So this is a timing event. 00:00:35.580 --> 00:00:44.850 Also there is another example we could have a piece of code that runs after a certain delay once the 00:00:44.850 --> 00:00:45.820 page is loaded. 00:00:45.900 --> 00:00:51.480 So let's say you load the page and after three seconds you get an alert message. 00:00:51.480 --> 00:00:53.890 So there is also a timing event. 00:00:54.420 --> 00:00:56.770 Let's start with the first example. 00:00:56.850 --> 00:01:00.080 So now we would like to create a counter. 00:01:00.090 --> 00:01:03.060 OK so the counter is going to start 0 0. 00:01:03.210 --> 00:01:06.750 And every second it's going to go up by 1. 00:01:06.750 --> 00:01:14.070 So first of all we are going to need a variable x that we will initiate to zero. 00:01:14.060 --> 00:01:15.790 All right. 00:01:15.800 --> 00:01:19.440 And then we would like X to go up by 1 every second. 00:01:19.500 --> 00:01:22.440 And also we want to show X in our web page. 00:01:22.440 --> 00:01:29.790 So we're going to need to use the Gets elements by ID and change the contents of an email element to 00:01:30.000 --> 00:01:31.340 the value of x. 00:01:31.680 --> 00:01:36.910 So let's have a paragraph let's use this one and change the idea of the paragraph to counter. 00:01:37.350 --> 00:01:42.480 Ok I really like the initial value of the paragraph to be zero. 00:01:43.320 --> 00:01:51.940 OK so now well we're going to do is we're going to define another variable before x. 00:01:52.110 --> 00:01:57.400 So this variable is going to get the elements by id of counter. 00:01:57.600 --> 00:02:10.850 So he's going to use the variable counter and we will set it to the paragraph of ID cards. 00:02:11.710 --> 00:02:13.080 OK. 00:02:13.440 --> 00:02:24.540 All right so now we need to use another function that will create this timing Givens. 00:02:24.960 --> 00:02:30.590 So first of all we will need to define another variable before we use that function. 00:02:30.630 --> 00:02:42.240 So this variable is going to be my counter and we will set does variable two sets interval. 00:02:42.560 --> 00:02:43.320 OK. 00:02:43.710 --> 00:02:49.630 And this function needs a couple of provinces. 00:02:49.920 --> 00:02:59.340 So the first barometer is going to be a function with the piece of code that we would like to run every 00:02:59.550 --> 00:03:00.720 second. 00:03:00.780 --> 00:03:01.390 OK. 00:03:01.590 --> 00:03:09.440 So you know Casey's going to be function of they're going to say here. 00:03:09.720 --> 00:03:15.110 So x increases by 1. 00:03:15.120 --> 00:03:20.550 And also we going to change the injuries Charmel of these elements 00:03:23.230 --> 00:03:23.820 counter 00:03:27.480 --> 00:03:31.580 Well we set it to the value of x. 00:03:31.580 --> 00:03:35.650 All right OK. 00:03:35.910 --> 00:03:42.100 So the second problem is is going to be the time interval in milliseconds. 00:03:42.120 --> 00:03:46.250 So in our case we would like X to go up by 1 every second. 00:03:46.320 --> 00:03:50.040 So we're talking here 1000 milliseconds. 00:03:50.520 --> 00:03:52.400 OK. 00:03:52.410 --> 00:03:57.730 So again the function to use is set in several. 00:03:57.840 --> 00:04:01.040 It will take a couple of parameters. 00:04:01.320 --> 00:04:03.360 First parameter is a function. 00:04:03.780 --> 00:04:05.840 OK. 00:04:05.850 --> 00:04:10.860 Make sure that's use a function not just a piece of code because the piece of code is just going to 00:04:10.860 --> 00:04:11.910 be in the curly brackets. 00:04:11.910 --> 00:04:14.510 This is a definition of a function. 00:04:14.610 --> 00:04:19.780 And the second parameter is the time interval in milliseconds. 00:04:20.730 --> 00:04:23.380 I will see later why we're using a variable. 00:04:23.410 --> 00:04:27.420 Ok when we would like to stop the code at some point. 00:04:27.810 --> 00:04:31.000 OK so let's run the page slow the page. 00:04:31.800 --> 00:04:34.980 And now we can see that the counter is working. 00:04:34.980 --> 00:04:37.240 It goes up by 1 every second. 00:04:37.590 --> 00:04:46.880 OK so now let's say that we would like to stop the counter by clicking on a button. 00:04:46.920 --> 00:04:48.290 So this creates a button 00:04:56.870 --> 00:05:07.430 a case where the person is supposed to stop the counting So he's put some text to stop counting. 00:05:09.820 --> 00:05:10.640 OK. 00:05:10.940 --> 00:05:21.050 So we're going to need on click property and the code to run here is going to use the variable that 00:05:21.110 --> 00:05:27.440 we set here which is my counter and we're going to use that variable as a parameter for another function 00:05:27.980 --> 00:05:30.010 that will stop the counting. 00:05:30.310 --> 00:05:34.330 So this function is going to be clear interval. 00:05:34.690 --> 00:05:35.920 OK. 00:05:36.110 --> 00:05:45.740 And the promise is going to be the same variable that we used to sets the interval. 00:05:45.860 --> 00:05:47.450 Replace the timing give. 00:05:47.850 --> 00:05:48.480 OK. 00:05:49.060 --> 00:05:54.910 So it is try that's now we can see that the counter is working. 00:05:55.170 --> 00:05:59.230 And now if you click on stop counting it just stopped. 00:05:59.680 --> 00:06:00.300 OK. 00:06:00.800 --> 00:06:09.460 So a set interval is used to create the timing events and clear interval is used to stop the timing 00:06:09.450 --> 00:06:10.460 events. 00:06:10.500 --> 00:06:18.700 OK OK now let's jump jump to another example so we'd like now to be able to load the page and run a 00:06:18.700 --> 00:06:25.240 piece of code after three seconds once the page is loaded. 00:06:25.250 --> 00:06:32.160 So in this case we going to create another variable and we're going to call it a 00:06:34.570 --> 00:06:44.390 delayed welcome message because we are going to have an alert message three seconds after the page is 00:06:44.380 --> 00:06:45.190 loaded. 00:06:45.760 --> 00:06:52.640 So we're just going to call these variable delayed work message and the function to use here is going 00:06:52.630 --> 00:06:59.970 to be set time outs. 00:07:00.130 --> 00:07:00.850 OK. 00:07:01.190 --> 00:07:06.080 And also this function needs a couple of parameters the first one is a function. 00:07:06.230 --> 00:07:08.480 The second one is the duration. 00:07:08.500 --> 00:07:13.500 Are we're going to be waiting for before the code is executed. 00:07:13.780 --> 00:07:18.080 So the function is going to be 00:07:24.400 --> 00:07:28.410 running the alert message. 00:07:28.890 --> 00:07:31.990 OK. 00:07:32.120 --> 00:07:35.680 So for example Welcome to our page. 00:07:35.690 --> 00:07:36.770 OK. 00:07:36.880 --> 00:07:41.680 The second priority is going to be the delay in our case we won't want to wait for three seconds which 00:07:41.770 --> 00:07:45.690 is 300 milliseconds 3000 milliseconds. 00:07:45.710 --> 00:07:46.540 So let's try this 00:07:50.500 --> 00:07:56.650 so we can see that's the alerts message shows up at three seconds after the page loads. 00:07:56.650 --> 00:07:57.380 So if we want. 00:07:57.380 --> 00:08:01.590 OK then the other time give it would just carry on. 00:08:01.600 --> 00:08:02.460 All right. 00:08:03.130 --> 00:08:03.400 OK. 00:08:03.400 --> 00:08:15.170 Now let's see how to avoid getting these alerts message so there is a way to stop the message from showing 00:08:15.160 --> 00:08:15.670 up. 00:08:15.680 --> 00:08:18.390 We can do that before the message shows up. 00:08:18.410 --> 00:08:21.080 So let's create another button. 00:08:21.860 --> 00:08:26.650 OK. 00:08:26.690 --> 00:08:35.390 So basically if we click on this button before three seconds from the loading of the page then we're 00:08:35.390 --> 00:08:38.930 going to stop these events from happening. 00:08:39.310 --> 00:08:40.550 OK. 00:08:41.260 --> 00:08:49.190 So let's have some texts in the past and so avoid welcome message. 00:08:50.170 --> 00:08:51.110 OK. 00:08:51.110 --> 00:08:54.130 And we're going to need an on click property 00:09:03.880 --> 00:09:05.760 at 00:09:07.900 --> 00:09:19.330 this time but we're going to use another function It's called Clear out clear time ups and the EPROM 00:09:19.350 --> 00:09:24.800 so you can guess is going to be the same variable that we use for the set time outs function. 00:09:25.010 --> 00:09:29.790 So OK just going to put the problem to there. 00:09:30.060 --> 00:09:30.890 OK. 00:09:31.000 --> 00:09:33.290 Now illustrates this. 00:09:33.620 --> 00:09:37.840 These are the line break. 00:09:38.940 --> 00:09:39.240 OK. 00:09:39.290 --> 00:09:41.190 So destroy it. 00:09:41.200 --> 00:09:44.900 Now we can see that the counter is working. 00:09:45.130 --> 00:09:49.880 We get the alerts message three seconds after the page loads. 00:09:50.170 --> 00:09:57.040 But now if we refresh the page and we click on the avoid welcome message. 00:09:57.050 --> 00:09:59.630 Now the alert message doesn't show up. 00:10:00.170 --> 00:10:06.550 OK but we need to make sure that we do that before the three seconds. 00:10:06.590 --> 00:10:06.820 OK 00:10:06.830 --> 00:10:13.070 .