Function stabilization and function throttling are old problems. Both of these approaches can optimize js performance. Some people may confuse the two. So, I will explain the meaning of these two concepts in my own understanding. And enumerates the use of these two methods in the applet.

 

Function anti – shake: In English debounce means anti-bounce, roughly means to prevent repeated triggering.

So, function stabilization, what it really means is: delay function execution. That is, no matter how long debounce has been fired, setTimeout is defined only the last time debounce has been fired, at which time the function that needs to be shaken is executed.

Use: Used for input box input, display matching input content.

 

Function throttle: in English, throttle means throttle valve. It also means saving the frequency of the trigger

So, function throttling, what it really means is: in unit time n seconds, the first time the function is fired and executed, no matter how many times in the next n seconds, it does not execute. Until the next unit time, n seconds, the first time the function fires and executes, no matter how many times the function is executed for n seconds.

Use: used for page scroll scroll, or window resize, or to prevent repeated click buttons and other situations

 

In fact, it is difficult to distinguish the two concepts based only on the frequency of the control function. I think both functions will do the trick of preventing repeated firing. But function stabilization is delayed execution after n seconds; Function throttling is executed immediately, n seconds later immediately.

 

In small programs, function stabilization, function throttling use:

These two methods are usually encapsulated in common JS:

tool.js

Function throttle(fn, interval) {var enterTime = 0; / var/trigger time gapTime = interval | | 300; Return function() {var context = this; return function() {var context = this; var backTime = new Date(); If (backtime-entertime > gapTime) {fn.call(context,arguments); enterTime = backTime; // Assign the time of the first trigger, so that the time of the second trigger is saved}}; } /* function debounce(fn, interval) {var timer; var gapTime = interval || 1000; Return function() {clearTimeout(timer); var context = this; var args = arguments; // Save arguments here. Since setTimeout is global, arguments are not required for the shake stabilization function. timer = setTimeout(function() { fn.call(context,args); }, gapTime); }; } export default { throttle, debounce };Copy the code

Use:

import tool from ".. /.. /until/tool.js"; Page({ data:{ win_scrollTop:0 }, onPageScroll: tool.throttle(function(msg){ this.setData({ win_scrollTop: msg[0].scrollTop }); }), gotoUnlock: tool.debounce(function() { this.saveUserInfo(); }), saveUserInfo:function(){ console.log(111) } })Copy the code

The above two methods are just a simplified version, and there may be some cases that have not been considered, which will be optimized after encountering.

 

Function throttling:

(1) The first time the function is executed, it must execute the function.

(2) When the second trigger is triggered within n seconds, when the first and second intervals are short of the set interval, it will not be executed. The third and fourth triggers are still not executed.

(3) There is one and only one time until n seconds later, and it is the first time that the function is fired again.

 

Description of function stabilization:

(1) When the function is first fired, a timer is defined. Execute after n seconds.

(2) When the function fires a second time, the timer is already the identifier of the timer that was fired the first time, due to the nature of closures. And then you just clear the first setTimeout, and the first setTimeout will not be executed. And then define a second setTimeout.

(3) Then repeat the second step, always clear, and always set. The last timer is defined until the last time the function fires, and the interval is n seconds.

(4) If the function fires again when the last timer is not executed, then the third step is repeated. It is equivalent to the set interval, but only the time it takes the function to execute, not the number of seconds it takes to execute.

 

At this point, the difference between the two approaches becomes clear. Function throttling reduces the frequency at which a function is fired, while function stabilization delays function execution and executes only the last time, no matter how many times it is fired.