1 00:00:02,290 --> 00:00:07,570 So now with the dynamic script added, I'm pretty much done for the interaction with the DOM which I wanted 2 00:00:07,570 --> 00:00:09,040 to cover in this module. 3 00:00:09,040 --> 00:00:15,160 However, there are some other nice features the browser exposes to you in Javascript that also allow 4 00:00:15,160 --> 00:00:21,820 you to influence the user experience and one of these cool features is a timer which you can set or 5 00:00:21,820 --> 00:00:26,430 actually two different kinds of timer as you can set in your Javascript code. 6 00:00:26,620 --> 00:00:33,610 Let's say instead of starting our analytics here, when the user clicks a button, we want to do this three 7 00:00:33,610 --> 00:00:36,060 seconds after the page was loaded 8 00:00:36,550 --> 00:00:38,440 and for that indeed you can set a timer. 9 00:00:38,440 --> 00:00:42,520 You do this with the built-in setTimeout method, under the hood 10 00:00:42,520 --> 00:00:47,050 this exists on the window object but as you learned you can omit the window and just call anything on 11 00:00:47,050 --> 00:00:51,100 it like this and setTimeout does just what the name implies, 12 00:00:51,100 --> 00:00:53,000 it sets a timer. Now setTimeout 13 00:00:53,050 --> 00:00:55,100 takes two arguments, 14 00:00:55,270 --> 00:01:00,160 the first argument is a function which should be executed when the timer expired, 15 00:01:00,160 --> 00:01:05,070 this can be an anonymous function, both an arrow function or a normal function 16 00:01:05,320 --> 00:01:12,500 or of course you point at a function like in this case, this start analytics so that this method is executed 17 00:01:12,500 --> 00:01:14,210 when the timer expires. 18 00:01:14,210 --> 00:01:18,650 The second argument then is the amount of time you want to give the timer, 19 00:01:18,650 --> 00:01:24,980 so for example here 3000 means 3000 milliseconds, so that would be three seconds, 20 00:01:24,980 --> 00:01:27,600 so this is a number in milliseconds 21 00:01:27,650 --> 00:01:32,860 this timer should take until it then executes this method. Now this 22 00:01:32,940 --> 00:01:39,100 also by the way is an example for some asynchronous code execution in Javascript, a topic we haven't 23 00:01:39,100 --> 00:01:40,780 really had a look at yet 24 00:01:40,780 --> 00:01:46,870 but as you will notice is when this timer is set, it will not pause your entire script execution, 25 00:01:46,870 --> 00:01:51,830 you will be able to click all buttons and have your script to work as expected, instead 26 00:01:51,850 --> 00:01:55,700 this is registered by the browser somewhere in the background, 27 00:01:55,810 --> 00:02:01,120 the browser manages the timer and also just registers that this function should be called when the 28 00:02:01,120 --> 00:02:02,180 timer expired 29 00:02:02,290 --> 00:02:07,960 and then once the browser sees that the timer expired, it will come back to your script and execute this 30 00:02:07,960 --> 00:02:08,920 function for you. 31 00:02:09,370 --> 00:02:13,440 So it's important to understand that this will not pause script execution, 32 00:02:13,450 --> 00:02:19,820 instead the browser will manage all of that for you in such a way that your script can continue to run, 33 00:02:19,900 --> 00:02:26,910 it will not pause. Another side note, you can also pass a third argument here and that would be 34 00:02:26,910 --> 00:02:32,850 an array of arguments you might want to pass in to that function when it executes. This function here, 35 00:02:32,850 --> 00:02:37,260 this method however needs no arguments, so we can just run it like this and hence 36 00:02:37,260 --> 00:02:42,870 now if we reload, we should see sending analytics here after 3 seconds, 37 00:02:42,870 --> 00:02:43,800 here we go, 38 00:02:44,500 --> 00:02:47,090 start analytics of course doesn't do anything. 39 00:02:47,590 --> 00:02:50,050 So that's the first kind of timer I wanted to show you, 40 00:02:50,080 --> 00:02:56,080 this is a timer which runs once. Sometimes you also want to have a timer that runs on an interval, so 41 00:02:56,080 --> 00:03:01,610 that runs every 3 seconds, every 5 seconds, every 100 milliseconds, whatever you have 42 00:03:01,930 --> 00:03:02,970 and you can do that too, 43 00:03:02,980 --> 00:03:08,340 let's maybe do that in the analytics.js file. In there, instead of logging this right 44 00:03:08,350 --> 00:03:13,900 when the script is loaded, let's set a timer because we might want to send analytics data to our server 45 00:03:14,320 --> 00:03:15,670 every 2 seconds 46 00:03:15,670 --> 00:03:21,760 let's say. For that, we can use setInterval, an alternative to setTimeout which does something different 47 00:03:21,760 --> 00:03:22,480 though. 48 00:03:22,480 --> 00:03:27,790 Here, I pass in an anonymous function, again can be an arrow function but doesn't have to be 49 00:03:27,970 --> 00:03:33,620 and in here I'll say sending analytics data, like that. 50 00:03:33,670 --> 00:03:40,360 Now the second argument to setInterval then is the time when this should be sent and it will be sent 51 00:03:40,540 --> 00:03:43,250 every x seconds or milliseconds, 52 00:03:43,300 --> 00:03:49,990 so if we entered 2000 here, this function here will execute every 2000 milliseconds, so 53 00:03:50,020 --> 00:03:51,810 every 2 seconds. 54 00:03:51,850 --> 00:03:57,220 You also can pass in a third argument which would be an array of arguments which will then be fed into 55 00:03:57,220 --> 00:03:59,980 this function when it is executed for you. 56 00:03:59,980 --> 00:04:01,100 Here we don't need that, 57 00:04:01,180 --> 00:04:02,660 so I'll just set it like this. 58 00:04:03,660 --> 00:04:09,720 The result of that is that if I now save that and reload, for 3 seconds nothing happens but thereafter, 59 00:04:09,750 --> 00:04:11,460 every 2 seconds, 60 00:04:11,460 --> 00:04:16,520 therefore initially after the first 5 seconds, we got this information being sent 61 00:04:16,620 --> 00:04:20,040 which is why this slowly increments here, every 2 seconds 62 00:04:20,040 --> 00:04:24,460 this is getting sent to the server. 63 00:04:24,550 --> 00:04:29,350 Now if you want to stop a timer or want to stop an interval, you can also do that. 64 00:04:29,350 --> 00:04:35,350 Let's say we change our button here at the bottom to stop the analytics so that no more data is getting 65 00:04:35,350 --> 00:04:40,470 sent, so we can set this to stop analytics button. 66 00:04:40,540 --> 00:04:46,690 This should either stop this timer if it still is running or if we already are on the interval, it should 67 00:04:46,690 --> 00:04:48,030 clear that. 68 00:04:48,520 --> 00:04:58,150 So to start with this timer, here after setting the timer, I will add an event listener, document get element 69 00:04:58,150 --> 00:05:06,980 by ID, stop analytics btn was the ID I assigned to this button here at the bottom and there, I want 70 00:05:06,980 --> 00:05:13,400 to add an event listener, a click listener where we can use an anonymous function, you could of course 71 00:05:13,400 --> 00:05:18,650 also set up a method but I'll just use this and here I want to stop this timer if it still is running. 72 00:05:19,900 --> 00:05:25,840 For that it's useful to know that this timer will actually return an ID so to say, so we can store 73 00:05:25,840 --> 00:05:31,990 this in a constant, timer ID and here you can then run clear timeout, another function provided by the 74 00:05:31,990 --> 00:05:38,720 browser in Javascript and to that, you pass the ID of a timer, of a timeout which you want to stop. 75 00:05:38,770 --> 00:05:45,730 So now if I save that and I reload, if we click on stop before the 3 seconds expires, you'll see we'll 76 00:05:45,730 --> 00:05:53,430 never see any analytics data being sent. On the other hand of course if I reload again and we wait until 77 00:05:53,430 --> 00:05:58,520 this is sent for the first time, if I now click on stop, 78 00:05:58,520 --> 00:06:00,350 this will not stop the interval. 79 00:06:00,350 --> 00:06:06,080 It will also not throw an error because the timer already expired so that's OK but the interval of course 80 00:06:06,080 --> 00:06:12,290 continues because we're not saying anything about the interval here, though we can also clear the interval 81 00:06:12,320 --> 00:06:13,250 if we want to. 82 00:06:13,430 --> 00:06:19,070 We can go to the analytics.js file where I set up this interval and I'll copy that code in there and 83 00:06:19,070 --> 00:06:25,520 essentially just store my interval ID here because just like setTimeout, this returns an ID for 84 00:06:25,520 --> 00:06:31,220 that interval and then instead of using clear timeout here, we would use clear interval and pass the 85 00:06:31,220 --> 00:06:38,420 interval ID to it, though little fun fact, you could also use clear timeout and it would also work but 86 00:06:38,540 --> 00:06:44,150 since we have it, it's better to use clear interval because it's clearer about your intentions and simply 87 00:06:44,150 --> 00:06:52,230 more descriptive. So clear interval for clearing intervals, clear time out for clearing timeouts 88 00:06:52,490 --> 00:06:59,390 and with that in place if we now save that and we reload and wait until this starts to send data, here 89 00:06:59,390 --> 00:07:00,590 we go, 90 00:07:00,590 --> 00:07:06,350 if I now click on stop analytics, you'll see this will not increment any further because no other data 91 00:07:06,350 --> 00:07:09,140 is sent because we cleared the interval. 92 00:07:09,140 --> 00:07:12,720 So these are timers in Javascript and how you can control them, 93 00:07:12,860 --> 00:07:18,230 what the browser does with them, it manages them behind the scenes so that your code execution is not 94 00:07:18,230 --> 00:07:22,700 stopped, as you see, I can interact with everything just fine 95 00:07:22,700 --> 00:07:28,190 even though there is a timer going on and intervals and timers are therefore a crucial feature which 96 00:07:28,190 --> 00:07:34,100 help you time things or do things on a regular basis, something which you actually need to do quite 97 00:07:34,100 --> 00:07:35,540 often in Javascript.