The difference between throttling and feature debut

Question

Can someone give me a simple explanation of the difference between throttling and feature debut for speed limiting purposes.

It seems to me that both are doing the same. I checked these two blogs to find out:

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Answer 1

Simply put:

• Throttling delays the execution of a function. This will reduce event notifications that fire several times.
• Debouncing will bind a series of consecutive function calls into one call to this function. It provides one notification for an event that fires several times.

You can visually see the difference here.

If you have a function that is called a lot - for example, when resizing or moving the mouse occurs, you can call it many times. If you don't want this behavior, you can Throttle so that the function is called at regular intervals. Debouncing will mean that it is called at the end (or start) of several events.

Answer 2

Personally, I found debounce harder than a throttle .

How both functions help delay and reduce execution speed. Assuming you call the decorated functions returned by the throttle / debounce repeatedly ...

• Throttle : call the original function no more than once per specified period.
• Debounce : function-function is called after the caller stops calling the decorated function after a specified period.

I found that the last part of the debut is crucial to understanding the goal she is trying to achieve. I also found that the old version of _.debounce implementation helps to understand (kindly https://davidwalsh.name/function-debounce ).

// Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. _.debounce = function(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; 

A far-fetched metaphor, but perhaps it can also help.

You have a friend named Chatti who loves to chat with you through IM. Assuming that when she speaks, she sends a new message every 5 seconds, while the icon of your IM application bounces up and down, you can take ...

• Naive approach: check every message as it arrives. When your app icon bounces, check. This is not the most effective way, but you are always up to date.
• Throttle Approach: You check once every 5 minutes (when there are new ones). When a new message arrives, if you checked at any time in the last 5 minutes, ignore it. You save your time with this approach while still in a loop.
• Failsafe approach: you know Chatti, she breaks the whole story into pieces, sends them in one message after another. Wait for Chatti to finish the whole story: if she stops sending messages within 5 minutes, you can assume that she has finished, now you check everything.

Answer 3

Differences

 +--------------+-------------------+-------------------+ | | Throttle 1 sec | Debounce 1 sec | +--------------+-------------------+-------------------+ | Delay | no delay | 1 sec delay | | | | | | Emits new if | last was emitted | there is no input | | | before 1 sec | in last 1 sec | +--------------+-------------------+-------------------+ 

Use case explanation :

• Search bar- Don't want to search every time the user presses a key? Want to search when the user has stopped typing for 1 second. Use debounce 1 second when you press a key.

• Shooting game- The gun takes 1 second between shots, but the user clicks the mouse several times. Use throttle at the click of the mouse.

Change your roles :

• Regulation 1 sec in the search bar - if the user enters abcdefghij with each character in 0.6 sec . Then strangle will cause first a press. It will ignore every click for the next 1 second, i.e. b at 0.6 seconds will be ignored. Then c after 1.2 seconds will work again, which again resets the time. So d will be ignored and e will work.

• Drop the gun for 1 sec- When the user sees the enemy, he clicks the mouse, but he does not shoot. He will press again several times during this second, but he will not shoot. He will see if there are cartridges in him, at this time (1 second after the last click) the gun will automatically fire.

Answer 4

Regulation provides the maximum number of times that a function can be called over time. Like in "perform this function no more than once every 100 milliseconds."

Debuxing ensures that the function will not be called again until a certain amount of time has passed without calling it . Like in "execute this function only if 100 milliseconds have passed without calling it."

link

Answer 5

Debouncing allows you to control the frequency of calls that a function can receive. It combines several calls that occur in a given function, so that repeated calls that occur before a certain time has passed are ignored. Basically, debouncing ensures that exactly one signal is sent for an event that can occur several times.

Throttling limits the frequency of calls that a function receives for a fixed time interval. It is used to ensure that the target function is not called more often than the specified delay. Throttling is a decrease in the speed of a recurring event.

Answer 6

In the conditions of a layman:

Debouncing will prevent the function from starting while it is still frequently called. The debounced function will work only after it is determined that it is no longer called, and at that moment it will work exactly once. Practical examples of debouncing:

• Autosave or check the contents of the text field if the user "stopped entering": the operation will be performed only once, AFTER it has been determined that the user no longer prints (no longer presses the keys).

• Logging where users leave their mouse: the user no longer moves his mouse, so you can record the (last) position.

Throttling will simply prevent the function from starting if it has been running recently, regardless of the frequency of the call. Practical examples of throttling:

• V-sync implementations are based on throttling: the screen will only be displayed if 16 ms have passed since the last screen was displayed. Regardless of how many times the screen update function is called, it will work no more than once every 16 ms.

Answer 7

Throttle (1 second): Hello, I'm a robot. While you will ping me, I will talk to you, but in exactly 1 second. If you answer me the request before the second has elapsed, I will still answer you in exactly 1 second. In other words, I just love to respond at regular intervals.

DEBAD (1 second): Hi, I'm that robot cousin ^^. As you continue to ping me, I will be silent, because I like to respond only 1 second after the last time you pinged me . I don’t know, because I have problems with attitude or I just don’t like to interrupt people. In other words, if you continue to ask me for answers until 1 second has passed since your last call, you will never receive a response. Yes, yes ... come on! call me rude.

---

Throttle (10 minutes): I am a forestry machine. I send system logs to our backend server in 10 minutes.

DEBAD (10 seconds): Hi, I'm not a cousin of this car. (Not every debosser is associated with a throttler in this imaginary world.) I work as a waiter in a nearby restaurant. I must tell you that while you continue to add things to your order, I will not go to the kitchen to fulfill your order. Only 10 seconds after the last time you changed your order, I will assume that you made your order. Only then will I fulfill your order in the kitchen.

---

Cool demos: https://css-tricks.com/debouncing-throttling-explained-examples/

Loans by analogy with the waiters: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Answer 8

It's simple.

They do the same (speed limitation), except that during the throttle call it will periodically run your function, and there will be no debounce . Debounce simply (tries) to call your function once at the very end.

Example : if you scroll, the gas will slowly call your function while scrolling (every X milliseconds). Debounce will wait until you finish scrolling to call your function.

Answer 9

gttle is just a debounce shell that allows debounce to call a passed function for a period of time if debounce delays a function call for a period of time that is longer than specified in throtle .

Answer 10

The lodash library offers the following article https://css-tricks.com/debouncing-throttling-explained-examples/ , which explains in detail the difference between Debounce and Throttle and their origin

Answer 11

As I understand it, in simple terms, Throttling is similar to calling setInterval (callback) for a certain number of times, i.e. calling the same function a certain number of times during a certain time when an event occurs and ... Debouncing - similar to calling setTImeout (callbackForApi) or calling a function after a certain time after the event occurs. This link can be helpful- https://css-tricks.com/the-difference-between-throttling-and-debouncing/