The principle and difference of JavaScript function throttling and function stabilization

I. Conceptual interpretation

? function throttling and function stabilization, both are a means of optimizing high-frequency execution of JS code.
? Everyone probably knows how the old TV set works, which is to scan the color on the screen and form a picture. Because the naked eye can only distinguish a certain frequency of changes, when the high frequency of scanning, human is not feel out. Instead, it forms a visual effect, which is a picture. Like a high-speed rotating fan, you can't see the blades, just see a circle.
In the same vein, you can analogy to the JS code. In a certain amount of time, the code does not have to be executed very often. Reaching a certain frequency is sufficient. Because the more you run, the effect is the same. It is better to control the execution times of JS code in a reasonable range. Not only can save the browser CPU resources, but also can make the page browsing smoother, not because of the execution of JS to happen to Dayton. This is what function throttling and function stabilization do.

? function throttling means that the JS method runs only once in a certain amount of time. For example, the blink of a person's eyes, is a certain time blink once. This is the most vivid explanation of function throttling.
? function Stabilization refers to the frequent triggering of cases where there is only enough idle time to execute the code once. For example, in the life of the bus, is a certain period of time, if someone has to swipe in the car, the driver will not drive. The driver only drives when someone else doesn't have a credit card.

Second, function throttling

The actual scenario of the function throttling application is most likely to be used when listening for page element scrolling events. Because of a scrolling event, it is a high-frequency trigger event. The following is a sample code that listens for page element scrolling:

function throttlingvar Canrun=True;Document.getElementById ("Throttle").Onscroll=function(){If!canrun){//determine if it is idle, if in execution, return directly return} canrun = false Span class= "at" >settimeout (function< Span class= "Hljs-function" > () { console. log ( "function throttle")  Canrun = true}, 300) ;       

? The main point of the function throttling is to declare a variable when the flag bit, to record whether the current code is executing.
? If idle, the method execution can be triggered normally.
? If the code is executing, cancel the execution of this method directly return .

The function of this method is to listen for a throttle scrolling event with ID element.
When it canRun is true , the current scrolling event is idle and can be used.
Pass the level if(!canRun) , equal to get the pass. Then the next step is to close the level immediately canRun=false . In this way, other methods that request the execution of a scrolling event are blocked back.
Then use the setTimeout specified minimum time interval of 300, then execute setTimeout the contents of the method body.
Finally, wait for setTimeout the inside method to complete, only release the level canRun=true , allow the next visitor to come in.

The implementation of this function throttle, it should be noted that the interval of execution is >=300ms . You callback can also canRun=true put this step in if the specific method of execution is included callback . Understand the function of throttling the level set focus, in fact, it is much easier to change.

Three, function stabilization

The most common application scenario for function stabilization is the mobile number verification and email verification of the user registration. Only when the user input is complete, the front end needs to check the format is correct, if not correct, then pop up the prompt. The following is also a page element scrolling monitoring example, to parse:

function stabilizationvar timer=False;Document.getElementById ("Debounce").onscroll =  Function () { Cleartimeout (timer) //clear code not executed, reset back to initialization state timer =  SetTimeout (function  () {c Onsole. log ( "function stabilization") }, 300) ;       

? The main point of the function stabilization is the need for an setTimeout auxiliary implementation. Delay execution of code that needs to run.
? If the method is triggered more than once, the deferred execution code of the last record is clearTimeout cleared and started again.
? If the timer is complete and no method comes in to access the trigger, execute the code.

The function of this method is to listen for a debounce scrolling event with ID element
When entering the rolling event method body, the first thing to do is to clear the last one that was not executed setTimeout . setTimeoutThe reference ID is recorded by the variable timer .
?clearTimeout Method that allows an invalid value to be passed in. So it can be executed directly here clearTimeout .
? Then, put the code that needs to be executed setTimeout in, and then return the setTimeout reference to the timer cache.
? If there are 300ms no new methods to trigger a scrolling event after the countdown, execute setTimeout the code in.

The key to the implementation of the function stabilization is to use the setTimeout cache pool skillfully, and to easily clear the code to be executed.
In fact, this can be done in a queue way. There is no depth here.

Four, online demo

? This is a test demo I wrote, move the mouse over the module, scroll the wheel, you can see the output effect in the console.

? Demo Address:https://wall-wxk.github.io/blogDemo/2017/02/15/throttleAndDebounce.html

Read the original:http://www.jianshu.com/p/b73c2acad696

The principles and differences of JavaScript function throttling and function stabilization