JavaScript Simplified · One concept, one day, one project · Day 26 of 32

setTimeout and Promises

Running code after a delay, and the modern way to represent a result that will arrive later. You build a food order that moves through its stages.

By the end of today you can

Delay code with setTimeout
Explain what a Promise is in plain words
Handle a Promise with .then and .catch
Build a food order simulator

Yesterday you saw that some results arrive later. Today you learn the two tools for handling "later": setTimeout for a plain delay, and Promises, the modern way to represent a value that is on its way, which might succeed or fail.

1. setTimeout

Definition

setTimeout runs a function once, after a delay you give in milliseconds (1000 ms is one second). It does not block; the rest of your code keeps running.

What this code doesThe order is logged now; the "ready" message arrives one second later. The number is the delay in milliseconds.

app.js

console.log("Order placed.");

setTimeout(() => {
  console.log("Your food is ready!");
}, 1000); // 1000 ms = 1 second

OUTPUT   TERMINAL

➜ webbo3 node app.js
Order placed.
Your food is ready!

2. Promises

Definition

A Promise is an object that represents a result that will be ready later. It is like a receipt: you do not have the food yet, but you have something that will become the food, or an explanation if something goes wrong. A Promise either resolves (succeeds, with a value) or rejects (fails, with a reason).

What this code doesresolve is called on success, reject on failure. .then receives a resolved value; .catch receives a rejection. Here it is in stock, so .then runs after one second.

app.js

// a promise that succeeds after a moment
const order = new Promise((resolve, reject) => {
  const inStock = true;
  setTimeout(() => {
    if (inStock) {
      resolve("Jollof rice is ready!");
    } else {
      reject("Sorry, it is sold out.");
    }
  }, 1000);
});

// handle the result when it arrives
order
  .then((message) => console.log("Success: " + message))
  .catch((problem) => console.log("Failed: " + problem));

OUTPUT   TERMINAL

➜ webbo3 node app.js
Success: Jollof rice is ready!

then and catch

.then handles success, .catch handles failure. You chain them so your code reads as "when it arrives, do this; if it fails, do that". Every data request you make will have both.

Today’s Mini Project

🍔 Food Order Simulator

Model an order moving through its stages: placed, processing, then ready, using delays. Then wrap it in a Promise so it can succeed or fail.

What this code doesThe order logs its stages, waits, then resolves (ready) or rejects (out of stock). The caller handles both with .then and .catch. This is the real shape of a request.

app.js

function placeOrder(item, inStock) {
  return new Promise((resolve, reject) => {
    console.log("Order placed: " + item);
    console.log("Processing...");
    setTimeout(() => {
      if (inStock) {
        resolve(item + " is ready for pickup!");
      } else {
        reject(item + " is out of stock.");
      }
    }, 1000);
  });
}

placeOrder("Suya", true)
  .then((msg) => console.log("Done: " + msg))
  .catch((err) => console.log("Problem: " + err));

OUTPUT   TERMINAL

➜ webbo3 node app.js
Order placed: Suya
Processing...
Done: Suya is ready for pickup!

Challenge (15 minutes)

Call placeOrder a second time with false for a sold-out item, and confirm the .catch message runs instead of .then.

Try This

Write a Promise that resolves with "Payment received" after 2 seconds, and log the result with .then.

Expected: "Payment received" appears two seconds later.

Picture This

A Promise is just a receipt for a value that is coming. Once you see it that way, the fear leaves: you are handed something now that becomes the real result later, with a clear path for success and failure. Tomorrow you get an even cleaner way to use them.

Checkpoint

What is a Promise?

An object representing a result that will be ready later. It either resolves with a value (success) or rejects with a reason (failure). It is like a receipt for a future value.

What do resolve and reject do?

resolve finishes the Promise successfully with a value; reject finishes it with a failure reason. .then receives the resolved value, .catch receives the rejection.

What does the number in setTimeout mean?

The delay in milliseconds before the function runs. 1000 is one second.

Tick Before You Move On

☐ I can delay code with setTimeout
☐ I can explain what a Promise is
☐ I can handle a Promise with .then and .catch
☐ I built the Food Order Simulator

Quick Recap

setTimeout runs a function once after a delay, without blocking. A Promise represents a value that will arrive later. It resolves on success or rejects on failure. .then handles the success, .catch handles the failure.

Next: Day 27. Chaining .then works, but there is a cleaner way to write asynchronous code that reads almost like normal steps: async and await.

setTimeout and Promises

1. setTimeout

Definition

2. Promises

Definition

Today’s Mini Project

Checkpoint

Learn this with a real instructor