Transcript
  • JavaScript

Using Timers

From the class:  The JavaScript Runtime

One of the ways you can put a function at the end of the task queue is by using setTimeout or setInterval. I'm going to show you in the rest of this video how that works. I've got my call stack over here on the right and the task queue that we talked about in the last video down on the bottom.

Now notice in the task queue there's a couple of things lined up. So imagine that we've opened up this app, and we're in the browser, and we just clicked on something. And so now there's a click handler function in the task queue just waiting to execute, and then a mouse move handler, which is also waiting to execute.

Now we're starting to execute our code up here, so the code is being read and executed from top to bottom. And when we call the setTimeout function, what we're saying is take this function here and put it on the task queue in about 2,000 milliseconds. So that's going to be 2 seconds from now. And so in about 2 seconds, take this function and put it right at the back of the queue. And then continue executing.

So we've already put something onto the queue. So now I'll come down here and print down our print console.log, and we'll print the now message to the console. So if we look at our call stack right now, it's just the anonymous function that we saw that was put on the call stack to run the initial program. And that's what's running now. And if we called another function somewhere in here, that would get added to the call stack here.

Now once this call stack is empty-- in other words, this part has completed running-- the event loop will see that there's another item here in the queue and go ahead and run that. So this function will now become the base of our call stack. And when that function completes, the next item will move over and get executed or get put onto the call stack and so on. Until finally, the function that we put on a couple of seconds later to the task queue makes it to the front of the line, and then it will execute as well.

We can do the same thing with setInterval. The only difference is that it will do this periodically. So instead of just once, putting this function on the task queue in 2 seconds, it will put it on the task queue every 2 seconds. So let's go over to the debugger and run some code and see what it looks like.

Let's take a look at this code. On the left, I've dropped us into this debug line here. And notice the call stack in the debugger, it just says anonymous function. So that's the root of our program. And we're starting the program and running it from top to bottom. And I'm going to start stepping through.

And we're going to call the setTimeout function. And at this point, this is going to add this function right here to the task queue. And then it'll continue executing down to the line 22. Now let's step into line 22. Now notice that another function has been added to the call stack, just like we've seen before. And then that function calls function two, and then that function calls function three. And so now the call stack has three items on it, three functions. And then it'll just return all the way back down the stack until we get down to back to the original caller.

So now the call stack is back to our anonymous function. It's unwound to the beginning. And then we'll print out console.log now. And I'll pull this up so you can see that it actually got printed. Now I'm just going to press Play. And remember that we have this function sitting in the task queue. So once this call stack becomes empty again, the event loop will go ahead and throw that callback function into the call stack and start executing it.

There we are in the debugger in the setTimeout callback. And now again, the call stack says anonymous function. That's just because we didn't name it. So we'll go back and do that in a minute. But if I step through now this function, we're going to call the one function again. And so now we'll start building up the call stack.

But the call stack has started over, and now we're building it up from scratch starting with this function here. So now we're started here, and we go to function one, two, and three, and then it'll return all the way back to here. And then the call stack will be empty again.

So let's step through it. And now we have nothing further to execute. And so the event loop just keeps looping and looping waiting for something new. Let's get rid of these debug statements and name this function so it's a little bit more clear. And I'll leave the debugger statement here so that we can see it in the console.

And then I'll refresh the console on the right. And in about two seconds, this drops us into our timeout handler. But notice the call stack now, the name of the function is timeout handler because we actually named the function. So naming your functions like this makes it easier to spot it in the call stack.

So one thing to note, if it wasn't obvious already, when we call this function setTimeout and provide it this 2 seconds, this is saying to put the function on the task queue in 2 seconds, but it doesn't mean that we're going to execute this function in 2 seconds. It means that it will execute when it gets to the front of the line. But that could be slightly longer than 2 seconds if there's other things in the queue.

So now let's jump over and try to do this with setInterval. The only thing I need to do is to change this to setInterval. And now it's going to put this function, timeout handler-- let's call it interval handler. It's going to put this function on the task queue every 2 seconds. So I'm not going to use the debugger here. And instead, let's just print out to the console interval handler.

And what will happen is one will get executed first. And then two will be added to the call stack, and three will be added to the call stack. And then we'll print out console.log just like before, and then our interval handler routines will start to run. So let's refresh this in the browser.

And notice down in the console in the bottom, first we print out now. And then the interval handler gets called every 2 seconds. To reiterate what's happened here, we start off with our original call stack. And we start executing our program top to bottom. This setInterval call puts this interval handler onto the task queue. So I'll just write it like this. And it does that in 2 seconds.

And then we start executing one. So we put one on the call stack, and then one executes two, and two executes three or calls into three. And then each one of these will eventually return, until we get down to the bottom of the call stack again. Then we print out to the log now. And that happens here. And then when this is done, the call stack empties and this goes up here and starts executing.

Now what's happening is because we call this setInterval every 2 seconds, a new one gets put onto the task queue. And this happens by the runtime, so it's happening at the same time that our program is running, that these tasks are just getting added one by one. But as far as our application code is concerned, we handle these sequentially, one after the other. So I hope this explains to you better how setTimeout and setInterval works, along with the task queue and the event loop.