Animating DOM with setInterval (Video Version)

I've got this webpage
with a picture of Oh Noes,

who is freaking out that
the world is going to end soon--

specifically, in 500 seconds.

I want to make this webpage
way more useful,

by turning this number into
a live countdown,

so that visitors can see exactly
how much time they have left.

Now, when we animate
part of a webpage,

the strategy is to find
some element in it,

then change something
about that element,

and do that a particular
number of times a second.

So, for the first step,
I will find the countdown by ID.

Simple.

[typing]

For the second step, I'll make
a function that counts down.

[typing]

And what we'll do--

I want to set the `textContent`,
and I want to set it equal to

the previous number minus one.

And the `textContent`
will actually be a string,

so we want to turn it into a number.

We can do that using `parsefloat()`.

And then we can subtract one from it.

Okay, so finally, we want to
call this function on an interval,

which means a certain
number of times per second.

And we can use that using
`window.setInterval()`.

And this function takes two arguments:

the callback function, and
the number of milliseconds to wait

before that function gets
called back again.

We can specify the callback function

just like we specify it
for event listeners: by name.

And then-- it's going really
fast right now

because we haven't specified
the second argument--

so for that, we want it to be
a certain number of milliseconds,

and we want it once per second,
so we're going to say a thousand,

because there are
a thousand milliseconds in a second.

There we go, now it's
counting down one per second.

So you'd better learn as much as you can
in the next 490 seconds!

There is one more window function that we
sometimes use instead of `setInterval`,

and that's setTimeout.

And I'll just change it to that,
and see if you can see the difference.

Have to wait a second.

Okay, so, now maybe you can see
that when we use `setTimeout`,

the browser only calls
the function once, not repeatedly.

That's not so useful for
when we're making animations.

But it can be super useful in other cases,

like if we showed a warning banner
to our users, and then we wanted

to hide it after 10 seconds.

So let me change this
back to `setInterval`.

Now, when we're testing
animations like this,

we should really see what they look like
at all points in the animation,

like what happens
when it gets down to zero.

Well that's going to take
a really long time to get there,

and you're going to
get really bored, so

we'll just change
our beginning data to 5,

and watch what happens.

Four, three, two, one, zero...

negative one, negative two.

Okay, so now it's getting weird.

When the world ends, it should just go
"Kaboom!" and stop counting.

So what we actually want to do,
is stop this animation

once it gets to that zero point.

And we can do that using
an `if` condition inside the function.

So, let me start by storing
the current time in a variable

since we're going to use it a few times.

So I'll just take this,
put it here,

and replace this with `currentTime`.

Now what I can do is
have an `if` condition

that makes sure we only update the text
if `currentTime` is greater than zero.

So that's the only time we want
to actually subtract one.

So I need to move this inside here.

This works, but there is something
really bad about this approach.

The browser is still calling the
`countItDown` function once per second

as long as this webpage is open.

You shouldn't make browsers
call functions for no reason--

they have lots of other
important things to do.

What we really want to do
is to tell the browser that

once it gets to zero, it doesn't need
to call this function anymore at all.

We can do that using a new method:
`window.clearInterval()`.

We can stick that in this `else` here--
`window.clearInterval()`.

Now, we need to pass it an argument,
so that it knows which interval to clear.

Because we might actually have
multiple intervals on a page.

The way that we know
which interval to clear

is to store the result
of `setInterval` in a variable.

So now I've got it in a timer variable,
I can copy and paste it into there,

and now it knows what to clear,
so when it gets to zero,

it should stop updating, and
it should stop calling that function.

For every animation that you make,
you should think carefully about

what the condition
should be for stopping it.

And yes, you might have some animations
that should go on and on, my friends--

but they'd better be
really sweet animations.

Because your browser is working every time
it calls that callback function.

Now spin this off, and make the world
actually go kaboom!