Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to analyze the anti-jitter and throttle function of javascript. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

An Analytical understanding of Anti-dithering and Throttle function

In fact, the concept of anti-shaking and throttling does not first appear in software engineering, anti-shaking appears in electronic components, throttling appears in fluid flow.

While JavaScript is event-driven, a large number of operations will trigger events and join the event queue for processing.

As for the loss of performance caused by some frequent event processing, we can limit the frequent occurrence of events by anti-shaking and throttling.

At present, anti-shake and throttling function are two very important functions in the front-end actual development, and they are also the interview questions that are often asked in the interview.

But many front-end developers are a little confused about these two functions:

Some developers simply can't tell the difference between anti-shaking and cost-saving (interviews are often asked)

Some developers can tell the difference, but don't know how to apply

Some developers will use some third-party libraries, but they don't know the internal principles, let alone write

Recognize the anti-shake debounce function

Let's use a picture to understand its process:

When an event is triggered, the corresponding function is not triggered immediately, but waits for a certain amount of time.

When the event is triggered intensively, the trigger of the function will be delayed frequently.

The response function will only be executed after waiting for a period of time and no event is triggered.

There are many application scenarios for anti-shaking:

Frequently enter content, search or submit information in the input box

Frequently click the button to trigger an event

Listen for browser scrolling events to complete some specific actions

The user zooms the resize event of the browser

The case of anti-shake function

We've all come across a scenario where you enter what you want to search in a search box:

For example, if you want to search a MacBook:

When I type m, for a better user experience, the corresponding associative content usually appears, which is usually stored on the server, so a network request is needed.

When you continue to enter ma, send the network request again

Then macbook needs to send a total of seven network requests.

This greatly erodes the performance of our entire system, whether it is the front-end event processing or the pressure on the server

But do we need so many network requests?

No, the right thing to do is to send the network request under the appropriate circumstances.

For example, if a user enters a macbook quickly, it only sends a network request.

For example, if the user enters an m and thinks about it for a while, m should indeed send a network request at this time

That is, we should monitor users to send network requests at a certain time, such as in 500ms, when the time is not triggered again.

This is the anti-shake operation: the function is actually called only if it is not triggered again within a certain period of time.

Understanding throttling throttle function

Let's use a picture to understand the process of cutting costs.

When an event is triggered, the response function for the event is executed

If this event is triggered frequently, the throttling function will execute the function at a certain frequency.

No matter how many times the event is triggered in the middle, the frequency of function execution is always fixed.

Application scenarios for throttling:

Listen for scrolling events on the page

Mouse movement event

User frequently clicks button operation

Some designs in the game

Application scenario of throttling function

A lot of people have played games like plane wars.

In the game of plane wars, we press the space and fire a bullet:

There is such a setting in many aircraft war games that bullets will be fired at a certain frequency, even if the frequency is pressed very fast.

For example, it can only be fired once per second, and even if the user presses 10 times in that second, the bullet will be fired at the frequency of one shot.

But the event is triggered 10 times, and the response function is triggered only once

Custom anti-shake and throttling function

We implement it according to the following ideas:

Realization of basic function of anti-shaking: anti-shaking effect can be achieved.

Optimization 1: optimize parameters and this pointing

Optimization 2: optimize the cancellation operation (add cancellation function)

Optimization 3: optimize the immediate execution effect (the first immediate execution)

Optimization 4: optimize the return value

Function debounce (fn,delay,immediate=false,resultCallback) {let timer=null / / console.log (this) / / window / / define variables that control immediate execution False indicates that the let isInvoke=false / / real handler function function _ debounce (... args) {/ / cancels the event execution operation if (timer) clearTimeout (timer) / / console.log (this) / / element element if (immediate handler invocation) {const result=fn.apply (this) Args) resultCallback (result) isInvoke=true} else {/ / delay execution of timer=setTimeout (() = > {const result=fn.apply (this,args) resultCallback (result) timer=null isInvoke=false}, delay)}} / / Encapsulation cancellation request _ debounce.cancel=function () {if (timer) clearTimeout (timer) timer=null isInvoke=false} return _ debounce}

We implement it according to the following ideas:

The basic realization of throttling function: it can achieve throttling effect.

Optimization 1: throttling can also be carried out for the last time

Optimization 2: optimize the add and cancel function

Optimization 3: optimize the return value problem

Function throttle (fn,interval,options= {leading:true,trailing:false}) {let lastTime=0 const {leading,trailing,resultCallback} = options let timer=null function _ throttle (... args) {const nowTime=new Date (). GetTime () / / leading optimization if (! leadingoptimization optimization lasttime) lastTime=nowTime let remainTime=interval- (nowTime-lastTime) if (remainTime {/ / parameter optimization const result=fn.apply (this) Args) if (resultCallback) resultCallback (result) timer=null lastTimeboxes leads 0VV new Date (). GetTime ()}, remainTime)} _ throttle.cancel=function () {if (timer) clearTimeout (timer) timer=null lastTime= 0} return _ throttle} above is the parsing of javascript's anti-jitter throttle function shared by Xiaobian. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.