[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.64,0:00:03.88,Default,,0000,0000,0000,,I've got this webpage\Nwith a picture of Oh Noes,
Dialogue: 0,0:00:03.88,0:00:07.86,Default,,0000,0000,0000,,who is freaking out that\Nthe world is going to end soon--
Dialogue: 0,0:00:07.86,0:00:10.47,Default,,0000,0000,0000,,specifically, in 500 seconds.
Dialogue: 0,0:00:10.47,0:00:13.36,Default,,0000,0000,0000,,I want to make this webpage\Nway more useful,
Dialogue: 0,0:00:13.36,0:00:16.93,Default,,0000,0000,0000,,by turning this number into\Na live countdown,
Dialogue: 0,0:00:16.93,0:00:20.78,Default,,0000,0000,0000,,so that visitors can see exactly\Nhow much time they have left.
Dialogue: 0,0:00:20.78,0:00:23.93,Default,,0000,0000,0000,,Now, when we animate\Npart of a webpage,
Dialogue: 0,0:00:23.93,0:00:26.71,Default,,0000,0000,0000,,the strategy is to find \Nsome element in it,
Dialogue: 0,0:00:26.71,0:00:29.30,Default,,0000,0000,0000,,then change something\Nabout that element,
Dialogue: 0,0:00:29.30,0:00:32.78,Default,,0000,0000,0000,,and do that a particular\Nnumber of times a second.
Dialogue: 0,0:00:32.78,0:00:37.69,Default,,0000,0000,0000,,So, for the first step,\NI will find the countdown by ID.
Dialogue: 0,0:00:37.69,0:00:39.49,Default,,0000,0000,0000,,Simple.
Dialogue: 0,0:00:39.49,0:00:44.42,Default,,0000,0000,0000,,[typing]
Dialogue: 0,0:00:47.54,0:00:51.61,Default,,0000,0000,0000,,For the second step, I'll make\Na function that counts down.
Dialogue: 0,0:00:51.61,0:00:54.59,Default,,0000,0000,0000,,[typing]
Dialogue: 0,0:00:54.59,0:00:56.86,Default,,0000,0000,0000,,And what we'll do--
Dialogue: 0,0:00:56.86,0:01:01.22,Default,,0000,0000,0000,,I want to set the `textContent`,\Nand I want to set it equal to
Dialogue: 0,0:01:01.22,0:01:03.76,Default,,0000,0000,0000,,the previous number minus one.
Dialogue: 0,0:01:03.76,0:01:06.80,Default,,0000,0000,0000,,And the `textContent`\Nwill actually be a string,
Dialogue: 0,0:01:06.80,0:01:09.95,Default,,0000,0000,0000,,so we want to turn it into a number.
Dialogue: 0,0:01:09.95,0:01:12.85,Default,,0000,0000,0000,,We can do that using `parsefloat()`.
Dialogue: 0,0:01:12.85,0:01:15.75,Default,,0000,0000,0000,,And then we can subtract one from it.
Dialogue: 0,0:01:15.75,0:01:21.54,Default,,0000,0000,0000,,Okay, so finally, we want to\Ncall this function on an interval,
Dialogue: 0,0:01:21.54,0:01:25.33,Default,,0000,0000,0000,,which means a certain\Nnumber of times per second.
Dialogue: 0,0:01:25.33,0:01:30.42,Default,,0000,0000,0000,,And we can use that using\N`window.setInterval()`.
Dialogue: 0,0:01:30.42,0:01:33.69,Default,,0000,0000,0000,,And this function takes two arguments:
Dialogue: 0,0:01:33.69,0:01:38.10,Default,,0000,0000,0000,,the callback function, and\Nthe number of milliseconds to wait
Dialogue: 0,0:01:38.10,0:01:40.88,Default,,0000,0000,0000,,before that function gets\Ncalled back again.
Dialogue: 0,0:01:40.88,0:01:43.37,Default,,0000,0000,0000,,We can specify the callback function\N
Dialogue: 0,0:01:43.37,0:01:46.81,Default,,0000,0000,0000,,just like we specify it\Nfor event listeners: by name.
Dialogue: 0,0:01:46.81,0:01:49.35,Default,,0000,0000,0000,,And then-- it's going really\Nfast right now
Dialogue: 0,0:01:49.35,0:01:51.83,Default,,0000,0000,0000,,because we haven't specified\Nthe second argument--
Dialogue: 0,0:01:51.83,0:01:55.25,Default,,0000,0000,0000,,so for that, we want it to be\Na certain number of milliseconds,
Dialogue: 0,0:01:55.25,0:01:58.52,Default,,0000,0000,0000,,and we want it once per second,\Nso we're going to say a thousand,
Dialogue: 0,0:01:58.52,0:02:01.56,Default,,0000,0000,0000,,because there are\Na thousand milliseconds in a second.
Dialogue: 0,0:02:01.56,0:02:05.22,Default,,0000,0000,0000,,There we go, now it's\Ncounting down one per second.
Dialogue: 0,0:02:05.22,0:02:10.24,Default,,0000,0000,0000,,So you'd better learn as much as you can\Nin the next 490 seconds!
Dialogue: 0,0:02:10.24,0:02:15.04,Default,,0000,0000,0000,,There is one more window function that we\Nsometimes use instead of `setInterval`,
Dialogue: 0,0:02:15.04,0:02:17.23,Default,,0000,0000,0000,,and that's setTimeout.
Dialogue: 0,0:02:17.23,0:02:21.78,Default,,0000,0000,0000,,And I'll just change it to that,\Nand see if you can see the difference.
Dialogue: 0,0:02:21.78,0:02:23.68,Default,,0000,0000,0000,,Have to wait a second.
Dialogue: 0,0:02:23.68,0:02:28.30,Default,,0000,0000,0000,,Okay, so, now maybe you can see\Nthat when we use `setTimeout`,
Dialogue: 0,0:02:28.30,0:02:33.88,Default,,0000,0000,0000,,the browser only calls\Nthe function once, not repeatedly.
Dialogue: 0,0:02:33.88,0:02:38.70,Default,,0000,0000,0000,,That's not so useful for\Nwhen we're making animations.
Dialogue: 0,0:02:38.70,0:02:41.73,Default,,0000,0000,0000,,But it can be super useful in other cases,
Dialogue: 0,0:02:41.73,0:02:45.87,Default,,0000,0000,0000,,like if we showed a warning banner\Nto our users, and then we wanted
Dialogue: 0,0:02:45.87,0:02:48.09,Default,,0000,0000,0000,,to hide it after 10 seconds.
Dialogue: 0,0:02:48.09,0:02:52.89,Default,,0000,0000,0000,,So let me change this\Nback to `setInterval`.
Dialogue: 0,0:02:52.89,0:02:56.51,Default,,0000,0000,0000,,Now, when we're testing\Nanimations like this,
Dialogue: 0,0:02:56.51,0:03:00.41,Default,,0000,0000,0000,,we should really see what they look like\Nat all points in the animation,
Dialogue: 0,0:03:00.41,0:03:02.46,Default,,0000,0000,0000,,like what happens\Nwhen it gets down to zero.
Dialogue: 0,0:03:02.46,0:03:05.26,Default,,0000,0000,0000,,Well that's going to take\Na really long time to get there,
Dialogue: 0,0:03:05.26,0:03:07.21,Default,,0000,0000,0000,,and you're going to\Nget really bored, so
Dialogue: 0,0:03:07.21,0:03:10.58,Default,,0000,0000,0000,,we'll just change\Nour beginning data to 5,
Dialogue: 0,0:03:10.58,0:03:12.54,Default,,0000,0000,0000,,and watch what happens.
Dialogue: 0,0:03:12.54,0:03:16.73,Default,,0000,0000,0000,,Four, three, two, one, zero...
Dialogue: 0,0:03:16.73,0:03:19.29,Default,,0000,0000,0000,,negative one, negative two.
Dialogue: 0,0:03:19.29,0:03:21.88,Default,,0000,0000,0000,,Okay, so now it's getting weird.
Dialogue: 0,0:03:21.88,0:03:26.29,Default,,0000,0000,0000,,When the world ends, it should just go\N"Kaboom!" and stop counting.
Dialogue: 0,0:03:26.29,0:03:30.11,Default,,0000,0000,0000,,So what we actually want to do,\Nis stop this animation
Dialogue: 0,0:03:30.11,0:03:32.73,Default,,0000,0000,0000,,once it gets to that zero point.
Dialogue: 0,0:03:32.73,0:03:36.32,Default,,0000,0000,0000,,And we can do that using\Nan `if` condition inside the function.
Dialogue: 0,0:03:36.32,0:03:42.23,Default,,0000,0000,0000,,So, let me start by storing\Nthe current time in a variable
Dialogue: 0,0:03:42.23,0:03:44.52,Default,,0000,0000,0000,,since we're going to use it a few times.
Dialogue: 0,0:03:44.52,0:03:47.51,Default,,0000,0000,0000,,So I'll just take this,\Nput it here,
Dialogue: 0,0:03:47.51,0:03:51.27,Default,,0000,0000,0000,,and replace this with `currentTime`.
Dialogue: 0,0:03:51.27,0:03:55.56,Default,,0000,0000,0000,,Now what I can do is\Nhave an `if` condition
Dialogue: 0,0:03:55.56,0:04:01.10,Default,,0000,0000,0000,,that makes sure we only update the text\Nif `currentTime` is greater than zero.
Dialogue: 0,0:04:01.10,0:04:04.94,Default,,0000,0000,0000,,So that's the only time we want\Nto actually subtract one.
Dialogue: 0,0:04:04.94,0:04:10.50,Default,,0000,0000,0000,,So I need to move this inside here.
Dialogue: 0,0:04:10.50,0:04:15.01,Default,,0000,0000,0000,,This works, but there is something\Nreally bad about this approach.
Dialogue: 0,0:04:15.01,0:04:19.44,Default,,0000,0000,0000,,The browser is still calling the\N`countItDown` function once per second
Dialogue: 0,0:04:19.44,0:04:21.56,Default,,0000,0000,0000,,as long as this webpage is open.
Dialogue: 0,0:04:21.56,0:04:24.84,Default,,0000,0000,0000,,You shouldn't make browsers\Ncall functions for no reason--
Dialogue: 0,0:04:24.84,0:04:27.58,Default,,0000,0000,0000,,they have lots of other\Nimportant things to do.
Dialogue: 0,0:04:27.58,0:04:30.94,Default,,0000,0000,0000,,What we really want to do\Nis to tell the browser that
Dialogue: 0,0:04:30.94,0:04:35.58,Default,,0000,0000,0000,,once it gets to zero, it doesn't need\Nto call this function anymore at all.
Dialogue: 0,0:04:35.58,0:04:40.38,Default,,0000,0000,0000,,We can do that using a new method:\N`window.clearInterval()`.
Dialogue: 0,0:04:40.38,0:04:47.35,Default,,0000,0000,0000,,We can stick that in this `else` here--\N`window.clearInterval()`.
Dialogue: 0,0:04:47.35,0:04:52.19,Default,,0000,0000,0000,,Now, we need to pass it an argument,\Nso that it knows which interval to clear.
Dialogue: 0,0:04:52.19,0:04:55.80,Default,,0000,0000,0000,,Because we might actually have\Nmultiple intervals on a page.
Dialogue: 0,0:04:55.80,0:04:58.90,Default,,0000,0000,0000,,The way that we know\Nwhich interval to clear
Dialogue: 0,0:04:58.90,0:05:02.98,Default,,0000,0000,0000,,is to store the result\Nof `setInterval` in a variable.
Dialogue: 0,0:05:02.98,0:05:07.82,Default,,0000,0000,0000,,So now I've got it in a timer variable,\NI can copy and paste it into there,
Dialogue: 0,0:05:07.82,0:05:11.12,Default,,0000,0000,0000,,and now it knows what to clear,\Nso when it gets to zero,
Dialogue: 0,0:05:11.12,0:05:15.57,Default,,0000,0000,0000,,it should stop updating, and\Nit should stop calling that function.
Dialogue: 0,0:05:15.57,0:05:19.33,Default,,0000,0000,0000,,For every animation that you make,\Nyou should think carefully about
Dialogue: 0,0:05:19.33,0:05:21.70,Default,,0000,0000,0000,,what the condition\Nshould be for stopping it.
Dialogue: 0,0:05:21.70,0:05:26.13,Default,,0000,0000,0000,,And yes, you might have some animations\Nthat should go on and on, my friends--
Dialogue: 0,0:05:26.13,0:05:29.02,Default,,0000,0000,0000,,but they'd better be\Nreally sweet animations.
Dialogue: 0,0:05:29.02,0:05:33.60,Default,,0000,0000,0000,,Because your browser is working every time\Nit calls that callback function.
Dialogue: 0,0:05:33.60,0:05:37.72,Default,,0000,0000,0000,,Now spin this off, and make the world\Nactually go kaboom!