Hello in this video I am planning at this moment in time.. what's going to
happen though? I'm planning to talk about the JavaScript functions these are
JavaScript native to the browser JavaScript functions setTimeout() and
setInterval(). I will be looking at how to use these functions in the context of a
javascript framework called p5 but really the focus is these particular
functions setTimeout and setInterval. What are these functions or how do they
work? What's the syntax for using them and why might you use them at all? So let's
begin right now so first let me come over here to the white board and I'm just gonna take a
moment to meditate and breathe and then write the words on the whiteboard here
"setTimeout" this is a function in javascript
that accepts two arguments you are asked to put two arguments inside this
function. The first argument is another function now if you've watched any of my
videos before which may be you have or maybe you haven't, or if you've done any JavaScript
programming before this idea of passing a function as an argument to another
function isn't a new thing this is very common. Functions are, in JavaScript, are
just variables are just things that you can declare that you can execute and
that you can pass around as functions, so what needs to go in here is a function
for example I'm gonna call this function rainbow. So the function is called
rainbow and it might have some code in it which means setTimeout should
reference that function. That's the first argument; I want to set time out the
rainbow function. The second argument is time, a moment of time in milliseconds
what does milliseconds mean? One second
equals 1000 milliseconds. "Milli" is being.. for thousand
somewhere in Latin or something comes from that probably.. So if you want something,
if you want to reference one minute you would be saying sixty seconds or 60,000
milliseconds, so time goes in here. So for example if I put two thousand here as my
second argument that means two seconds. So setTimeout the rainbow function 2000.
What does that mean? It means I want the code that's inside the rainbow function to
execute 2 seconds from now. This is just a marvelous, you know, this is like the
gestalt of everything that happens in JavaScript, it's you know it's callbacks
and asynchronous things. I have this block of code, I'm going to specify
when it should happen and then somehow it will just happen then based on
what I specified, so this really like represents everything there is to be about the
programming language JavaScript all here. Now I should briefly mention before I
start writing this code and making something happen in the actual code that
this is often not written this way this is often written as what's called an
anonymous function, right? I said setTimeout requires two arguments; a
function like this function rainbow and a time when that function should be
executed like 2000 milliseconds or two seconds later from when this function was
called however you could actually take all of the code that's here and just
stick it right in where this is. And I'll demonstrate that to you when I type
stuff out, for teaching and kind of legibility I find it right now I find it
often useful to break out the function definition into a separate place
sometimes that's actually necessary depending on what you doing codewise but
in many cases it's often convenient especially if this function is just one
line of code to embed it anonymously in here. What do I my anonymous by the way?
[Takes a deep breath] Why would a function be anonymous? So what I mean by that is this function's
name is rainbow and we need the function's name so that setTimeout can
refer to that particular function but if we define the function right in here it wouldn't actually
need a name because we don't need to reference it we're just sticking it in
there so you could write in here an anonymous function would look like this
can you see that you can see that? Hopefully you can so this entire block of code with something
written in here to actually do could be inserted right there. So that was a little bit
long winded but this is the basic idea of setTimeout so now here we are, here
I am at least; maybe you're still watching or maybe you've gone and watched stampy cat
and a Minecraft video instead [laughs]
totally bored by me, but or like.. nevermind I was gonna think of some other interesting things you watch on YouTube but I guess you have
your own interests separate from mine that's one of my interest but putting all that aside what
do I have over here? So what I have here is a JavaScript program it's a p5 sketch
it has some code written to it already so if you're familiar with p5
there's a setup function there's a draw function. Setup() is where I'm creating a
canvas that appears in the browser and draw() is this thing that just automatically
happening over and over again, so there already is a sense of time in this
particular example and time is managed for us for me by the p5 library but I
want to do something different so what you might have sometimes seen, in
Processing programs or p5js programs or any kind of program that anyone
has ever written in the history of programming in the universe, is like an if statement here.
If a certain number of milliseconds has passed or if the number of frames that
have animated then do this; so using setTimeout is a way that I could say you
know what I want something to happen in five seconds after the program starts
without having to check inside of draw when is this, how many times to draw, what
time is it, that sort of thing so let's look at how.. let's come up with something
so I'm gonna write my function called rainbow. I don't know why I kept the Bow with
capital B; and in that function am just gonna say createP
'rainbow' so my my very non existent colorful rainbow is going
to be replaced by just a paragraph of text with the word rainbow it .So you can
see right here if I were to just execute that function in setup and run the code
again you can see in addition to the canvas I now have the paragraph rainbow
it's been.. the rainbow function was called right when the program starts and the
paragraph was created so now let me say instead setTimeout
rainbow and then I'm gonna say 3.. oops 3000. I'm gonna say 3000
milliseconds later or 3 seconds later create that paragraph. This is gonna be very
exciting here we go... are you ready?
Ready to count? One 1000, Two 1000, Three 1000 there we go. See?
So 3000 milliseconds later that code gets executed
so you could imagine if you want to script a whole bunch of things that
happen at various points of time you can make that happen. Now this isn't to say that
this just happened in setup for example what I can do now is I could you know
add the generic.. you know I probably should make a button or something but I'll just add the
generic kind of global mousePressed function so anywhere I click the mouse on
the page right? I could count to 3 all I want but I'm not going to get my rainbow
until I click the mouse but when I click the mouse am not going to get the
rainbow until... that was so perfect timing and now I'm gonna do it again
Ooh shoot, I was so close.
Ok you get the idea though right?
so this is what time.. setTimeout does it allows you to trigger a particular
action at a given moment in time and interestingly enough I could do
something like if I called this in the ...in the rainbow function lets see
what happens here.. oops am gonna put this back and set up and I'm going to make this
one thousand and am gonna run this again
rainbow rainbow rainbow rainbow every second I get a new rainbow. You get a rainbow you
get a rainbow you get a rainbow
everybody gets a rainbow so I've really got to stop this video now that I
started acting like Oprah but so anyway umm so that's the point, I think you get it..
I think this was good.. I think like.. it's almost like too easy there's not very much
am so used to like wanting to make a five-minute video and it takes 15
minutes that I made this way too long and and we're only at 8 minites. So there's more to this than that, there's more to this than
that... there's more to it than this so I've show you the very basics what I want to
do is make a couple more videos one will show you setInterval which actually will do
something much like this where I've sort of nested the call to set time out every 1,000
seconds
1000 milliseconds and then I want to look at what happens if you want to
create a different sequences of things happening.. like what if you..? Here's a
scenario that I think will be worth looking at what if you had an array of musical
notes and you wanted those notes to play in a sequence each one of those notes
with a certain amount of time essentially to play a melody. How might you do that
with someTimeout to specifying the time for each one of those notes? So I'm
hoping to make a video with an example like that, ok thanks very much
and am gonna hit stop now.