DEV Community

loading...

Mastering Hard Parts of JavaScript: Asynchronicity II

internettradie profile image Ryan Ameri ・2 min read

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?

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.

function delayedGreet() {}

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

Solution 2

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.

function helloGoodbye() {}

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

Solution 3

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

Notice that we could have also written

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.

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

Solution 4

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 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.

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

Solution 5

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.

Discussion (0)

Forem Open with the Forem app