Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to cancel a debounced function after it is called and before it executes?

I create a debounced version of a function with underscore:

var debouncedThing = _.debounce(thing, 1000); 

Once debouncedThing is called...

debouncedThing(); 

...is there any way to cancel it, during the wait period before it actually executes?

like image 560
user1031947 Avatar asked Mar 12 '15 14:03

user1031947


People also ask

What is the difference between Debounce and throttle?

Throttle: the original function will be called at most once per specified period. Debounce: the original function will be called after the caller stops calling the decorated function after a specified period.

What is a Debounced function?

The debounce() function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called. The Send Request() function is debounced. Requests are sent only after fixed time intervals regardless of how many times the user presses the button.

What is the difference between Debounce and setTimeout?

debounce uses setTimeout internally so the difference is related to the number of times setTimeout is fired. debounce throttles the amount of times it fires setTimeout . If multiple requests are sent in a short duration, only one will come through.

Does debounce use setTimeout?

Each time the debounced function is invoked, clear the current pending timeout with clearTimeout() . Use setTimeout() to create a new timeout that delays invoking the function until at least ms milliseconds have elapsed.


2 Answers

If you use the last version of lodash you can simply do:

// create debounce const debouncedThing = _.debounce(thing, 1000);  // execute debounce, it will wait one second before executing thing debouncedThing();  // will cancel the execution of thing if executed before 1 second debouncedThing.cancel() 

Another solution is with a flag:

// create the flag let executeThing = true;  const thing = () => {    // use flag to allow execution cancelling    if (!executeThing) return false;    ... };  // create debounce const debouncedThing = _.debounce(thing, 1000);  // execute debounce, it will wait one second before executing thing debouncedThing();  // it will prevent to execute thing content executeThing = false; 
like image 138
Carlos Ruana Avatar answered Oct 17 '22 20:10

Carlos Ruana


Old, but adding a note for anyone else who gets here.

The docs (I'm looking at 1.9.1 right now) say that you should be able to do:

var fn = () => { console.log('run'); }; var db = _.debounce(fn, 1000); db(); db.cancel(); 

This would do the thing that the OP wants to do (and what I wanted to do). It would not print the console message.

I have never been able to get this to work. I have looked high and low for a .cancel() as promised in the Underscore doc and I cannot find it.

If you are using Underscore, use the flag option in the accepted answer by Carlos Ruana. My requirements lamentably (in my opinion) do not allow an upgrade (in my opinion) from Underscore to Lodash. Underscore has less functionality but it is more functional than without.

like image 28
Stephan Samuel Avatar answered Oct 17 '22 20:10

Stephan Samuel