Introduction

JavaScript does not have a built-in blocking sleep, so “sleep” is usually implemented with setTimeout wrapped in a promise. Once you model the delay that way, cancellation becomes a matter of clearing the timer and rejecting or resolving the promise in a controlled way.

The cleanest modern pattern is to use AbortController so the same cancellation mechanism can work across sleeps, fetch calls, and other asynchronous operations.

A Basic Sleep Utility

A simple promise-based sleep is easy to write, but by itself it is not cancellable.

1function sleep(ms) {
2  return new Promise((resolve) => setTimeout(resolve, ms));
3}
4
5async function run() {
6  console.log("start");
7  await sleep(1000);
8  console.log("end");
9}
10
11run();

This is fine for quick scripts, but it gives the caller no way to stop the wait once it has started.

Add Cancellation With AbortController

A cancellable sleep can listen to an abort signal and clear the timer if cancellation happens first.

1function sleepCancelable(ms, signal) {
2  return new Promise((resolve, reject) => {
3    if (signal?.aborted) {
4      reject(new Error("Sleep cancelled"));
5      return;
6    }
7
8    const timer = setTimeout(() => {
9      cleanup();
10      resolve();
11    }, ms);
12
13    const onAbort = () => {
14      clearTimeout(timer);
15      cleanup();
16      reject(new Error("Sleep cancelled"));
17    };
18
19    const cleanup = () => {
20      signal?.removeEventListener("abort", onAbort);
21    };
22
23    signal?.addEventListener("abort", onAbort);
24  });
25}
26
27const controller = new AbortController();
28
29sleepCancelable(5000, controller.signal)
30  .then(() => console.log("completed"))
31  .catch((err) => console.log(err.message));
32
33setTimeout(() => controller.abort(), 1000);

This is the most reusable approach because it fits naturally with modern cancellation patterns.

Promise.race Is Not True Cancellation

Another common pattern is to race a task against a timeout. That is useful for deadlines, but it does not cancel the underlying work automatically.

1function timeout(ms) {
2  return new Promise((_, reject) => {
3    setTimeout(() => reject(new Error("Timed out")), ms);
4  });
5}
6
7async function withTimeout(taskPromise, ms) {
8  return Promise.race([taskPromise, timeout(ms)]);
9}

This controls how long the caller waits, but the original task may still continue unless it also supports cancellation.

That is why Promise.race is best understood as timeout management, not as full task cancellation.

Tie Cancellation to Lifecycle

In browser code, cancellation usually belongs to a user or component lifecycle: route changes, button clicks, component unmount, or request replacement.

1const controller = new AbortController();
2
3document.getElementById("cancel").addEventListener("click", () => {
4  controller.abort();
5});
6
7sleepCancelable(10000, controller.signal)
8  .catch(() => console.log("cancelled by user"));

That keeps old timers from lingering after the relevant UI state has already changed.

Make Cleanup Explicit

Long-lived applications should always remove abort listeners and clear timers on both success and cancellation paths. Without that discipline, you accumulate callbacks that fire after the user context is gone.

A reusable helper should therefore handle:

• immediate abort check
• timer cleanup on success
• timer cleanup on abort
• listener removal in both paths

The earlier sleepCancelable helper does exactly that.

Common Pitfalls

A common mistake is assuming that wrapping setTimeout in a promise makes it magically cancellable. It does not unless you also keep and clear the timer ID.

Another issue is using Promise.race and thinking the losing promise stopped running. It usually did not.

Developers also often forget to remove abort listeners, which creates unnecessary memory and lifecycle complexity in long-running apps.

Finally, do not share one AbortController across unrelated operations unless they are intentionally part of the same cancellation scope.

Summary

• JavaScript sleep is usually a promise around setTimeout.
• To cancel it, keep the timer handle and clear it explicitly.
• 'AbortController is a good modern pattern for cancellable delays.'
• 'Promise.race gives a timeout boundary, not true task cancellation.'
• Tie cancellation scope to real user or request lifecycle boundaries.