CODEWITHSUNDEEP
javascriptalgorithm
user12695833
user12695833

Reputation:

Implement debounce: how to make three invocations result in one effective call?

How can I invoke three times a function with a setTimeOut but just print it once after 100 milliseconds??

This is the definition of debounce that I have to implement:

Debounce ignores the calls made to it during the timer is running and when the timer expires it calls the function with the last function call arguments, so I want to achieve that with Javascript

A function will be debounced as follows:

receivedEvent = debounce(receivedEvent, 100)

My attempt:

function debounce(func, timeInterval) {
  return (args) => {
    setTimeout(func, timeInterval)

  }
}

function receivedEvent() {
  console.log('receive')
}

receivedEvent();
receivedEvent();
receivedEvent();

But this still generates 3 outputs. I need it to only produce one output according to the requirements.

Upvotes: 0

Views: 193

Answers (1)

trincot
trincot

Reputation: 350167

In your attempt you did not call debounce, but just called your own function receivedEvent. Maybe the site where your attempt is tested will do this for you, but we cannot know this from your question. Just make sure it is called.

To test the requirements you need to use a better use case: one based on a function that receives arguments. This is needed because you must prove that the debounced function is called after the timeout with the last passed arguments.

The key to this pattern is to use variables within a closure:

function debounce(func, timeInterval) {
    let timer;
    let lastArgs;
    return (...args) => {
        lastArgs = args; // update so we remember last used args
        if (timer) return; // not ready yet to call function...
        timer = setTimeout(() => {
            func(...lastArgs);
            timer = 0; // reset timer (to allow more calls...)
        }, timeInterval);
    }
}

function receivedEvent(arg) {
    console.log('receive ' + arg)
}

receivedEvent = debounce(receivedEvent, 100)

receivedEvent("a");
receivedEvent("b");
receivedEvent("c");

// Output will be "c" after 100ms

Note that the question's definition of "debounce" deviates a bit from its usual definition, where the first invocation actually calls the function immediately, and only then starts the timeout (cooldown-period).

Upvotes: 1

Related Questions