Throttle Event Handler

Prompt

/**
 * We have a function called makeRequest that makes an API request.
 * We also have a function called eventHandler that is hooked up to
 * an event (a click, for example), and right now it's a dumb handler
 * that simply calls makeRequest.
 *
 * Write a new event handler eventHandlerWithThrottling that we can hook
 * up to the click event such that it won't call makeRequest more
 * than once every 5 seconds.
 *
 * We do not care what the API request returns (assume it's a fire-and-forgot POST)
 *
 * Events that occur within 5 seconds of an API request are "remembered",
 * and once the 5 second timeout is over, **the latest one will be fired**.
 **/

let now = 0;

function makeRequest(payload) {
  // let's pretend this makes a request, and logs the payload/time of request
  console.log({
    data: payload,
    time: Math.round((new Date().getTime() - now) / 1000)
  });
}

const throttle = (callback, delay) => (payload) => callback(payload);
// const throttledMakeRequest = throttle(makeRequest, 5000);

export default throttle;

Playground

Solution

Explanation

This question tests your understanding of throttling with a twist — not only do you need to limit how often a function runs, but you also need to remember the latest event and fire it once the cooldown period is over. Let's break it down.

What Makes This Different from Basic Throttle?

A basic throttle simply ignores all calls during the cooldown period. This version is smarter — it remembers the most recent call and fires it after the cooldown. This means no events are silently lost.

Think of it like an elevator door: if you press the button while the door is closing, it won't open immediately, but it will remember your request and open once it's safe to do so.

The Closure Variables

We use closure to keep track of state between calls:

let lastCallTime = 0;
let timeoutId = null;

• lastCallTime tracks when we last actually called the callback. Starting at 0 means the very first call will always fire immediately.
• timeoutId stores the ID of any scheduled future call, so we can cancel it if a newer event comes in.

Handling Each Event

When the returned function is called, we first figure out how much time has passed:

const now = Date.now();
const timeSinceLastCall = now - lastCallTime;

Then we clear any previously scheduled call. This is the key to "remembering only the latest" — if we already scheduled an older event, we throw it away in favor of the new one:

if (timeoutId) {
  clearTimeout(timeoutId);
  timeoutId = null;
}

The Decision: Fire Now or Later?

If enough time has passed since the last call, we fire immediately:

if (timeSinceLastCall >= delay) {
  lastCallTime = now;
  callback(payload);
}

Otherwise, we calculate how much time is left in the cooldown and schedule the call for later:

const remainingTime = delay - timeSinceLastCall;
timeoutId = setTimeout(() => {
  lastCallTime = Date.now();
  timeoutId = null;
  callback(payload);
}, remainingTime);

Notice we update lastCallTime inside the timeout too — this ensures the cooldown resets after the scheduled call fires.

Dry Run

Let's trace through a scenario with a 5-second delay:

Notice how "click-2" and "click-5" never fire — they were replaced by newer events. Only the latest event in each window gets executed.

Notes

if (timeoutId) {
  clearTimeout(timeoutId);
  timeoutId = null;
}

Resources

• setTimeout()

• clearTimeout()

• Closures

• Date.now()