Cancellable Timeout

Easy

Prompt

Create a function called setCancellableTimeout that works like JavaScript's built-in setTimeout, but with the ability to cancel it easily.

Your function should accept a callback function and a delay time in milliseconds. It should schedule the callback to run after the specified delay. Most importantly, it should return a function that, when called, will cancel the timeout.

This is useful when you need to schedule something to happen later, but also want the option to change your mind and cancel it.

Example

const cancelTask = setCancellableTimeout(
  () => console.log('Executing delayed work'),
  2000
);

// Cancel execution if needed before the timeout completes
cancelTask();

Playground

Solution

Explanation

The solution to this problem involves creating a wrapper around JavaScript's built-in timeout functionality that returns a cancellation function.

Let's break down the implementation step by step:

First, we create our setCancellableTimeout function that takes three parameters:

  • func: The callback function to execute after the delay
  • delay: The time in milliseconds before the function executes
  • ...args: Any additional arguments that should be passed to the callback function
function setCancellableTimeout(func, delay, ...args) {
  // Implementation here
}

Inside this function, we use the native setTimeout method to schedule our task:

const timerId = setTimeout(func, delay, ...args);

This gives us a unique identifier (the timer ID) that we can use to cancel the timeout if needed.

The key part of our solution is that we return a function that, when called, will clear the timeout:

return () => {
  clearTimeout(timerId);
};

This creates a closure that "remembers" the timer ID even after our main function has finished executing. When this returned function is called, it uses clearTimeout() with the stored ID to cancel the scheduled execution.

The pattern is elegant in its simplicity. Consider how we use it:

const cancelTask = setCancellableTimeout(() => console.log('Task executed'), 2000);

// If we need to cancel the timeout before it executes:
cancelTask();

This provides a clean interface for scheduling delayed tasks that can be easily cancelled when needed. The implementation uses the closure pattern to maintain access to the timer ID, which is a fundamental JavaScript technique for managing state across function calls.

This pattern is particularly useful in user interfaces where you might need to cancel pending operations if the user takes a different action before the timeout completes.

We can also simplify the implementation by passing the callback function and delay as arguments to the setTimeout method:

function setCancellableTimeout(...args) {
  const timerId = setTimeout(...args);
}
00:00

Table of Contents