Mastering Hard Parts of JavaScript: Asynchronicity II
Tags: javascript, webdev, async, codenewbie
Published: 2020-08-17 21:05:03

---
series: Mastering Hard Parts of JavaScript
description: An introduction to JavaScript asynchronicity using 10 exercises
---
## Exercise 1

> Thinking point (no writing code necessary for this challenge): Inspect the code given to you in Challenge 1. In what order should the console logs come out? Howdy first or Partnah first?

```js
function sayHowdy() {
  console.log("Howdy");
}

function testMe() {
  setTimeout(sayHowdy, 0);
  console.log("Partnah");
}
testMe();
```

### Solution 1

The output is `Partnah` first, followed by `Howdy`. As discussed, setTimeout is a callback function so its execution gets placed in the task queue, it is invoked only after everything in the call stack is executed.

## Exercise 2

> Create a function delayedGreet that console logs welcome after 3 seconds.

```js
function delayedGreet() {}

delayedGreet();
// should log (after 3 seconds): welcome
```

### Solution 2

```js
function delayedGreet() {
  setTimeout(() => console.log("welcome"), 3000);
}
```

A gentle introduction, but an important foundation. This is how to wrap a callback function (which in reality is not a browser API) in our own function.

## Exercise 3

> Create a function helloGoodbye that console logs hello right away, and good bye after 2 seconds.

```js
function helloGoodbye() {}

helloGoodbye();
// should log: hello should also log (after 3 seconds): good bye
```

### Solution 3

```js
function helloGoodbye() {
  console.log("hello");
  setTimeout(() => console.log("good bye"), 3000);
}
```

Notice that we could have also written

```js
function helloGoodbye() {
  setTimeout(() => console.log("good bye"), 3000);
  console.log("hello");
}
```

The order doesn't matter in this example, as `console.log` will always get executed first before `setTimeout` is called.

## Exercise 4

> Create a function brokenRecord that console logs hi again every second. Use the End Code button to stop the console logs when you are satisfied that it is working.

```js
function brokenRecord() {}
brokenRecord();
// should log (every second): hi again
```

### Solution 4

```js
function brokenRecord() {
  function printHi() {
    console.log("hi again");
  }
  setInterval(printHi, 1000);
}
```

If you haven't seen `setInterval` before, you might be tempted to use a loop here but that won't get you the desired output. `setInterval` is a method of the Web APIs that the browser/environment provide. As always [MDN](https://developer.mozilla.org/en-US/docs/Web/API) is a fantastic way of delving into them all.

## Exercise 5

> Create a function limitedRepeat that console logs hi for now every second, but only for 5 seconds. Research how to use clearInterval if you are not sure how to do this.

```js
function limitedRepeat() {}
limitedRepeat();
// should log (every second, for 5 seconds): hi again
```

### Solution 5

```js
function limitedRepeat() {
  function printHi() {
    console.log("hi again");
  }
  function clear() {
    clearInterval(id);
  }
  printHi();
  const id = setInterval(printHi, 1000);
  setTimeout(clear, 5000);
}
```

And here is setInterval's counterpart: clearInterval. When we call setInterval, it returns an Interval ID which uniquely identifies the interval. We can pass that to clearInterval to stop the interval.