Build a Toast/Notification Queue That Shows One at a Time With Auto-Dismiss

Q: Build a Toast/Notification Queue That Shows One at a Time With Auto-Dismiss

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Easy > **How to read this doc:** the "never more than one active" claim was verified live, in a real browser, by sampling the actual DOM at multiple points in time — not asserted from reading the code alone. ## 1. The problem, restated Build a queue where `enqueue(message)` can be called any number of times in quick succession, but the UI only ever shows ONE toast at a time — each auto-dismissing after a fixed delay before the next queued message appears, in the order they were enqueued. ## 2. Clarifying questions a strong candidate asks | Question | Why it matters | | :--- | :--- | | Same duration for every toast, or configurable per message? | Determines whether `duration` is a queue-level option or passed per `enqueue` call. | | Click-to-dismiss early, in addition to auto-dismiss? | A real, common enhancement — worth naming even in a first pass. | | Unbounded queue length? | Wor

The problem

Problem, as an interviewer would state it: "Build a toast notification queue. Multiple toasts can be triggered in quick succession, but only ONE should ever be visible at a time — each one auto-dismisses after a delay, then the next one in line appears. Enqueue three messages back to back and show me it genuinely never displays more than one at once."

Examples:

Code

queue.enqueue("Saved!");
queue.enqueue("Upload complete");
queue.enqueue("3 new messages");
// exactly one toast visible at any given moment, in the order they were enqueued

Clarifying questions expected:

Is the display duration the same for every toast, or configurable per message?
Should a toast be dismissible early by the user (click to dismiss), in addition to auto-dismiss?
Is there a maximum queue length, or can it grow unbounded?

Code / implementation expected: Yes — a real, live-verified implementation showing exactly one active toast at every sampled point in time across all three messages.

queue
timers
ui-pattern

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Easy

How to read this doc: the "never more than one active" claim was verified live, in a real browser, by sampling the actual DOM at multiple points in time — not asserted from reading the code alone.

1. The problem, restated

Build a queue where enqueue(message) can be called any number of times in quick succession, but the UI only ever shows ONE toast at a time — each auto-dismissing after a fixed delay before the next queued message appears, in the order they were enqueued.

2. Clarifying questions a strong candidate asks

Question	Why it matters
Same duration for every toast, or configurable per message?	Determines whether `duration` is a queue-level option or passed per `enqueue` call.
Click-to-dismiss early, in addition to auto-dismiss?

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, live-verified proof: exactly one toast is ever active at a time, correctly advancing through the queue in order — verified directly in a real browser