So now with the dynamic script added, I'm pretty much done for the interaction with the DOM which I wanted
to cover in this module.
However, there are some other nice features the browser exposes to you in Javascript that also allow
you to influence the user experience and one of these cool features is a timer which you can set or
actually two different kinds of timer as you can set in your Javascript code.
Let's say instead of starting our analytics here, when the user clicks a button, we want to do this three
seconds after the page was loaded
and for that indeed you can set a timer.
You do this with the built-in setTimeout method, under the hood
this exists on the window object but as you learned you can omit the window and just call anything on
it like this and setTimeout does just what the name implies,
it sets a timer. Now setTimeout
takes two arguments,
the first argument is a function which should be executed when the timer expired,
this can be an anonymous function, both an arrow function or a normal function
or of course you point at a function like in this case, this start analytics so that this method is executed
when the timer expires.
The second argument then is the amount of time you want to give the timer,
so for example here 3000 means 3000 milliseconds, so that would be three seconds,
so this is a number in milliseconds
this timer should take until it then executes this method. Now this
also by the way is an example for some asynchronous code execution in Javascript, a topic we haven't
really had a look at yet
but as you will notice is when this timer is set, it will not pause your entire script execution,
you will be able to click all buttons and have your script to work as expected, instead
this is registered by the browser somewhere in the background,
the browser manages the timer and also just registers that this function should be called when the
timer expired
and then once the browser sees that the timer expired, it will come back to your script and execute this
function for you.
So it's important to understand that this will not pause script execution,
instead the browser will manage all of that for you in such a way that your script can continue to run,
it will not pause. Another side note, you can also pass a third argument here and that would be
an array of arguments you might want to pass in to that function when it executes. This function here,
this method however needs no arguments, so we can just run it like this and hence
now if we reload, we should see sending analytics here after 3 seconds,
here we go,
start analytics of course doesn't do anything.
So that's the first kind of timer I wanted to show you,
this is a timer which runs once. Sometimes you also want to have a timer that runs on an interval, so
that runs every 3 seconds, every 5 seconds, every 100 milliseconds, whatever you have
and you can do that too,
let's maybe do that in the analytics.js file. In there, instead of logging this right
when the script is loaded, let's set a timer because we might want to send analytics data to our server
every 2 seconds
let's say. For that, we can use setInterval, an alternative to setTimeout which does something different
though.
Here, I pass in an anonymous function, again can be an arrow function but doesn't have to be
and in here I'll say sending analytics data, like that.
Now the second argument to setInterval then is the time when this should be sent and it will be sent
every x seconds or milliseconds,
so if we entered 2000 here, this function here will execute every 2000 milliseconds, so
every 2 seconds.
You also can pass in a third argument which would be an array of arguments which will then be fed into
this function when it is executed for you.
Here we don't need that,
so I'll just set it like this.
The result of that is that if I now save that and reload, for 3 seconds nothing happens but thereafter,
every 2 seconds,
therefore initially after the first 5 seconds, we got this information being sent
which is why this slowly increments here, every 2 seconds
this is getting sent to the server.
Now if you want to stop a timer or want to stop an interval, you can also do that.
Let's say we change our button here at the bottom to stop the analytics so that no more data is getting
sent, so we can set this to stop analytics button.
This should either stop this timer if it still is running or if we already are on the interval, it should
clear that.
So to start with this timer, here after setting the timer, I will add an event listener, document get element
by ID, stop analytics btn was the ID I assigned to this button here at the bottom and there, I want
to add an event listener, a click listener where we can use an anonymous function, you could of course
also set up a method but I'll just use this and here I want to stop this timer if it still is running.
For that it's useful to know that this timer will actually return an ID so to say, so we can store
this in a constant, timer ID and here you can then run clear timeout, another function provided by the
browser in Javascript and to that, you pass the ID of a timer, of a timeout which you want to stop.
So now if I save that and I reload, if we click on stop before the 3 seconds expires, you'll see we'll
never see any analytics data being sent. On the other hand of course if I reload again and we wait until
this is sent for the first time, if I now click on stop,
this will not stop the interval.
It will also not throw an error because the timer already expired so that's OK but the interval of course
continues because we're not saying anything about the interval here, though we can also clear the interval
if we want to.
We can go to the analytics.js file where I set up this interval and I'll copy that code in there and
essentially just store my interval ID here because just like setTimeout, this returns an ID for
that interval and then instead of using clear timeout here, we would use clear interval and pass the
interval ID to it, though little fun fact, you could also use clear timeout and it would also work but
since we have it, it's better to use clear interval because it's clearer about your intentions and simply
more descriptive. So clear interval for clearing intervals, clear time out for clearing timeouts
and with that in place if we now save that and we reload and wait until this starts to send data, here
we go,
if I now click on stop analytics, you'll see this will not increment any further because no other data
is sent because we cleared the interval.
So these are timers in Javascript and how you can control them,
what the browser does with them, it manages them behind the scenes so that your code execution is not
stopped, as you see, I can interact with everything just fine
even though there is a timer going on and intervals and timers are therefore a crucial feature which
help you time things or do things on a regular basis, something which you actually need to do quite
often in Javascript.