JavaScript: Event Loop

“You’ve gotta poop on yourself before you crawl.” — Jason

It’s hard to believe that it’s already been three weeks since I first sat at my desk and opened my macbook at The Iron Yard Academy. As I mentioned, the first week revolved around HTML and CSS, and the next two weeks were all about JavaScript.

My 12 classmates and I spent 10+ hours a day programming. So far, we’ve worked on…

…and things are finally starting to click. And by click, I mean that the frustrating attempt to figure out how to solve countless puzzles are starting to seem almost…enjoyable. One of my biggest challenges was coming to terms with the fact that making messy mistakes and screwing everything up before piecing everything back together is simply part of the creative process. Frustrating, terrifying, but ultimately gratifying process. “Gotta poop on yourself before you crawl,” said my classmate Jason, while working through his millionth attempt to make a button work just so. )He figured it out after a while, of course, being far more patient than I could ever hope to be…)

This week’s project: asynchronous JavaScript. Over the weekend, we had to create a full-screen color clock using HTML, CSS, and of course JavaScript (Date object FTW). The clock updates in real time when the page is refreshed, and when the cursor hovers over the numbers, the RGB code for the background color appears instead. Go check it out. I’ll wait.

Tik-tok, I’m a screen-shot of a clock…

That is Phase I. Phase II is infinitely more complicated. The clock has to update itself on the page by the millisecond, synced up to the colors, which also change. That is where asynchronous JS and event loops come in.

As the introduction to these concepts, I watched Phil Roberts’s 2014 conference keynote presentation What the Heck is the Event Loop, Anyway?

The short answer to the posed question is: I’m still not sure. I heard words. Some words I recognized. Some new words were introduced. It’s all pretty intimidating. But not hopeless! I’ve learned these things:

  • When JavaScript is referred to as a “single-treaded programming language”, it means that it can only compute one thread, or, one call stack, or basically one thing at a time.
  • The call stack records where in the program we are.
  • Blocking — things that are slow, stuck in processing. You shouldn’t create too many functions that block the stack if you want to have nice fluid UIs.
  • Solution to blocking: asynchronous callbacks — run some code, give it a callback (for example, set a timer), run that later.
  • JS can only do one thing at a time. The reason we can do things concurrently is because the browser can do more than just the JavaScript Runtime.
  • Event loop has one simple job. It looks at the stack and at the task queue. If the stack is empty, it takes the first thing on the queue and pushes it onto the stack, which effectively runs it.

That’s all I got. I’m hoping the lecture will provide more clarification. Check back to look at the updated clock, which will hopefully be as beautiful and functioning as it should be pretty soon!