![]() console.log('Everybody') returns, so it’s popped off the stack.We continue our script, stepping into the console.log('Everybody') function, pushing it onto the stack.setTimeout is part of the web API, so the web API handles that and times out the 2 seconds.We step into the setTimeout function, so it’s pushed onto the call stack.console.log('Hi') returns, so it’s popped off the top of the stack.We step into the console.log('Hi') function, so it’s pushed onto the call stack.What’s actually happening here? Let’s go through it: Let’s use it to look at a simple example: logging a few things to the console, with one console.log happening asynchronously in a setTimeout. It’s a tool that can visualize the JavaScript runtime at runtime. Philip built an awesome tool to visualize all of this, called Loupe. Look at the stack and look at the task queue if the stack is empty, it takes the first thing off of the queue and pushes it onto the stack (back in JS land, back inside V8). It’s the simplest little piece in this equation, and it has one very simple job. The stack can put things into web APIs, which (when done) push callbacks onto task queue, and then…the event loop. But we can do things concurrently, because the browser is more than the runtime (remember the grainy image above). It can’t do a setTimeout while doing other code. It can’t make an ajax request while doing other code. It’s true: JavaScript the runtime can only do one thing at a time. It’s a lie that JavaScript can only do one thing at a time. Concurrency, where we realize there’s a lie above This is a problem in the browser-while we wait on a request, the browser is blocked (can’t click things, submit forms, etc.). Since JS is single-threaded, we make a network request and have to wait until it’s done. Those things that are slow and on the stack are blocking. console.log isn’t slow, but while loops from 1 to 1,000,000,000, image processing, or network requests are slow. Blocking doesn’t have a strict definition really it’s just things that are slow. BlockingĪn important question that this relates to: what happens when things are slow? In other words, blocking. We see the state of the stack (which functions have been called) when that error happened. When our program throws an error, we see the call stack in the console. If we return from a function, we pop off the top of the stack. If we step into a function, we push something onto the stack. The call stack is basically a data structure which records where in the program we are. JavaScript is single-threaded, meaning it has a single call stack, meaning it can do one thing at a time. a callback queue for events with callbacks like onClick, onLoad, onDone.Web APIs that the browser provides, like the DOM, ajax, and setTimeout.But they don’t have setTimeout, the DOM, etc. ![]() JavaScript runtimes (like V8) have a heap (memory allocation) and stack (execution contexts). ![]() If you’re like me (or Philip Roberts, it seems), these words themselves don’t mean a ton.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |