Debounce and throttle

ArticleDirectory

• Debounce header execution
• Debounce tail execution
• Execute the throttle header and synchronize the version
• Complete throttle tail

Debounce

An image is a rubber ball. If you hold down the rubber ball with your fingers, the ball will remain stressed and cannot rebound until it is released.

The focus of debounce is the idle interval.

 
/*** The idle time must be greater than or equal to the idle value when the function is continuously called. The action will execute the * @ Param idle {number} idle time, the Unit is millisecond * @ Param action {function}. The function to be called by the actual application * @ Param tail? {Bool} whether to execute * @ return {function} at the end to return the customer's call function */debounce (idle, action, tail ?)
 

Throttle

The image is similar to a tap or machine gun. You can control its traffic or frequency.

Throttle focuses on consecutive execution intervals.

 
/*** Frequency Control: When the returned function is called consecutively, the execution frequency of the action is limited to/delay * @ Param delay {number, the Unit is millisecond * @ Param action {function}. The function to be called by the actual application * @ Param tail? {Bool} indicates whether to call * @ return {function} with a timer at the end to return the client call function */throttle (delay, action, tail ?)
 

Example Code

 
// Ajaxquery will be executed 250 milliseconds after the input is stopped $ ('# autocomplete '). addeventlistener ('keyup', debounce (250, function () {ajaxquery (this. value, renderui) ;}, true) // when the window size changes, the positioning function positionwindow is executed at a frequency of 50 milliseconds. addeventlistener ('resize', throttle (50, position, true ));
 

Application

These two functions can be taken into account as long as applications involving continuous events or frequency control are involved, for example:

• Game shooting and keydown events
• Text input, Automatic completion, keyup event
• Mouse movement and mousemove event
• Dom element dynamic positioning, window object Resize and scroll events

Both debounce and throttle can be used as needed. The latter two must use throttle.

If no filtering is performed, dozens of corresponding events are triggered every second. In particular, the mousemove event may trigger an event every pixel it moves. If you use a mouse-related application on a canvas, filtering event processing is required. Otherwise, it will definitely lead to a poor experience.

During implementation, note that the throttle function does not use a timer. At this time, all associated functions are executed synchronously. This is good, such as a game shooting application with a 50 ms interval. However, if it is a fixed element to locate the application, you may have to consider completing the last trigger event. In this case, you must use a timer.

In the same way, note the following:

1) return value. If the associated function has a return value, if a trigger is asynchronously executed, the return value cannot be obtained. You can consider extending the version used here, adding callback function parameters or extending it to a throttle object.

2) input parameters. I directly captured the arguments parameter in the closure and used the last triggered parameter during asynchronous execution.

I have seen similar functions in popular RX, ext, and underscore. After comparison, the functions in underscore are simplified, and debounce can only be executed at the end. All the functions associated with throttle are executed asynchronously. When it is triggered for the first time, it will not even execute the association function, this is a feature of the timer itself for delayed execution.

What impressed me most was that I used to write several variables to control the frequency. However, once you know the patterns and names of such behaviors, you can solve these problems at one time.

Shape

In my implementation, there are four different effects based on different parameters. As shown in the following figure, the image corresponding to the continuous triggering event of mousemove In the example is used. The delay parameter is set to 150 ms.

The highlighted line segment of each pixel width in the vertical axis indicates a tracking statistics, the red color indicates event triggering, and the yellow color indicates the association function after filtering. The number in the horizontal axis is in milliseconds.

Debounce header execution

Apparently, until you're 'logging'

Debounce tail execution

A very interesting signal is displayed near 850. The result is not waited for the idle ms interval, and an event is triggered, and the timer is cleared immediately.

Execute the throttle header and synchronize the version

Even if an event is triggered after 301 and 751, It is discarded directly.

Complete throttle tail

151 and 907 are asynchronous timer execution and are completed by time difference.

BTW: The above picture is the move of the Razer mouse. I also tried it on the company's computer. The moving of the Dell mouse can be determined by comparing images, and the sampling rate is much lower. This is obviously an example where the hardware may affect performance, = _ =.

Download

Https://gist.github.com/1306893

Example

Throttle_demo.htm