Learn Debounce And Throttle In 16 Minutes 

Yes we also learned that in electrical engineering shool. In german this behavior is called entprellen.

Seems like it is. And what about throttle?

That's still a problem, every mouse and keyboard(mechanical) still has a debounce delay in order to prevent double clicks

Debounce originally referred to a push button signal bouncing up and down, triggering multiple interrupts, if there is no filter on the software or hardware side. The solution is to either place an RC filter, or service only 1 interrupt per push (requires a timer module in the MCU). The name also holds in Javascript, even though the problem appears vastly different it is essentially identical.

@@mLevyks Certainly. I'm not asserting that the problem only existed long ago in early days of computers. I'm saying that the term "debounce" originated back then, and it had a different meaning.

thxxxx a lot, really helpful

It's how the closure works.

@@QwDragon yes, the debounce function is called once, the returned function is called multiple times. That wasn’t immediately obvious to me, but it all makes sense.

I was thrown off by this too when coding along, but yes, closures is why.

I will explain you that part of the code here: const updateDebunce = debounce((text)=>{ //do something with text}); function debounce(cb,delay=1000){ let timeout return (...args) =>{ timeout = setTimeout(()=>{cb(...args);},delay); } On the updateDebunce definition, you are self invoking the function. Basically, you are running the function debounce. In other words, you have done: let timeout; (...args)=>{ timeout= setTimeout(()=>cb(...args);delay}; where cb is (text)=>{ //do something with text}; this args come from the running updateDebunce; when you run updateDebunce(text), you are passing the argunment text to the function declared after timeout. You are not running debounce function, debounce function it is run only on the declaration. What you are running it is the function (...args)=>{ timeout= setTimeout(()=>cb(...args);delay}; Replacing the function would be: (...args)=>{ timeout= setTimeout(()=>(...args)=>{ //do something with ...args};delay}; But timeout was declared on const updateDebunce, so, you will have that variable declared in this scope. This concept is called closures. You can find and example of it here: www.w3schools.com/js/js_function_closures.asp I hope this explanation helps you

@@alexjose70 I understand this but what actually does this help ? (I mean the closures concept). The only I can think of is to have the variable used in the inner function declared 1 time in the outer function.