Skip to content

Do This After

Most of the code you have written runs top to bottom, one line at a time. Each line waits for the one before it to finish.

But some things in JavaScript take time — going out to the internet to fetch data, for example. JavaScript does not freeze and wait. It carries on running other code, and when the slow thing is done, your "what to do next" code runs.

Think of it like this: you ask a friend to go to the shop. You do not stand frozen at the door waiting for them to come back. You carry on — make tea, check your phone, do other things. When your friend returns, then you put the groceries away. The "put the groceries away" part is the "do this after" instruction.

A simple example — setTimeout

setTimeout runs a function after a delay. You give it two things: the function to run, and how many milliseconds to wait.

<script>
  console.log("Before")

  setTimeout(function() {
    console.log("This runs after 2 seconds")
  }, 2000)

  console.log("After")
</script>

Open the console and try this. The output order is:

Before
After
This runs after 2 seconds

Notice — "After" prints before "This runs after 2 seconds", even though setTimeout appears first in the code. JavaScript did not wait. It scheduled the task and moved on immediately.

The function you pass to setTimeout is the instruction for what to do when the time is up.

Passing a function as an instruction

You just passed a function into setTimeout. That is a pattern you will see everywhere in JavaScript — giving a function to something else as the instruction for what to do later.

You can also do it with a named function if that feels clearer:

function sayHello() {
  console.log("Hello!")
}

// give sayHello to setTimeout — it will call it after 1 second
setTimeout(sayHello, 1000)

You are not calling sayHello() yourself. You are just handing it to setTimeout and saying "call this when the time comes." setTimeout calls it for you.

"Do this when it is done" — .then()

fetch() — which you will use on the next page — works the same way. You ask for data from the internet, JavaScript goes off to get it, and when it comes back your "do this with it" code runs.

The way to say "do this after" with fetch is .then(). You chain it onto the fetch call:

fetch("some-url")
  .then(function(response) {
    // the response arrived — do something with it
    console.log(response)
  })

If you need two steps in a row after the fetch, you chain two .then() calls:

fetch("some-url")
  .then(function(response) {
    return response.json()   // step 1: convert the raw response to usable data
  })
  .then(function(data) {
    console.log(data)        // step 2: now the data is ready — use it
  })

Read it top to bottom:

  1. Fetch the URL
  2. When that is done — convert the response to data
  3. When that is done — use the data

Each .then() runs only after the previous step finishes. No freezing, no waiting.

Challenge

In a plain HTML file, write a script that:

  1. Prints "Starting..." to the console
  2. Uses setTimeout to print "Done!" after 3 seconds
  3. Prints "Waiting..." right after the setTimeout line

Check the order the messages appear in the console. Can you explain why "Waiting..." shows before "Done!"?

← For Loops    Next: Fetch →