Front end essential skills – throttling

Time:2022-5-8

(Introduction – eating out with big guys is always rewarding. This knowledge point is something I have never considered before, but it is two very important and frequently used concepts in modern design and development.)

As a beginner at the front end, because he has been in the rain before, he wants to take an umbrella for people who walk in the same rainy day.
First of all, we see a problem. We can’t blindly search its answer directly, especially for the front end. First of all, you have to consider why you use it and where it can be used? We not only hope that all of us simply memorize by rote, but to really understand it. Let’s get to the point:


What is throttling?

You don’t need to understand the literal meaning of these two words for the time being. Think about such a problem first. Suppose there is a scenario as follows:

1. You designed a form, which submitted a lot of data.

2. Some of your users are bored and click the submit button crazily after writing the form.

3. Your back-end colleagues come to you and point to the crashed server to complain to you.

What would you do at this time?
OK, I choose to resign on the spot

Wake up, you play the game, you put a certain awakening skill, will this skill let you continue to play it for the first time? Yes, that’s right. Just like you play games, your big moves need a cooling time to play. If you can always play some high damage skills, what’s the difficulty of this game? Before long, players feel bored and retreat.

So my first thought must be to give this button a cooling time.
It’s much simpler. Now I use pseudo code to build the logical thinking of the real code we are going to write.

Now there are two things in front of me: a button submission function and a cooling time, which is assumed to be 5 seconds (according to the actual work setting).

When it comes to time, I will think of setTimeout and setinterval for the first time. First, setinterval is excluded. Because I don’t want the function of submitting forms to execute circularly, I choose setTimeout.

Front end essential skills - throttling
Suppose you are playing a game now, and the game has a skill, phantom sword dance, whose skill CD is two seconds, then we need to judge whether the user has clicked this skill multiple times in two seconds. If you click it multiple times, nothing will happen (return an empty function). If it is not on the CD, return the special effect of this skill (function executed by the skill)

Here I use the console output as a display. I return a console for this button click event Log() function. Let it output whether I have released it on the console.

Front end essential skills - throttling
Front end essential skills - throttling
Front end essential skills - throttling
Here we need to know that cdtime is just a shell function. Its real meaning is to pass the parameters we need. It is not the function we want onclick to execute! (this explanation is explained in my article: the difference between higher-order functions and callback functions. I won’t explain it too much here.).

Now we design cdtime, that is, we limit the phantom sword dance to release within two seconds. It’s not in my CD for two seconds
Front end essential skills - throttling
The detailed code is as follows

Front end essential skills - throttling

In this step, you need to understand that the function in the red box is the function we really want to execute
Front end essential skills - throttling
Or that sentence (this explanation is explained in my previous article: the difference between higher-order functions and callback functions)
**

In fact, there is more than one method of throttling, but the overall implementation idea is similar. If you understand these codes, you will master the idea of throttling.

Recommended Today

Spring source code analysis 5: bean configuration, definition and registration

Spring source code analysis 5: bean configuration, definition and registration staySpring source code analysis II: context component (webapplicationcontext)There are some points to be resolved: ConfigurableListableBeanFactoryHow to load and instantiate beans ResourceEditorRegistrarHow to register the Attribute Editor and how the Attribute Editor resolves to an object PathMatchingResourcePatternResolverHow to resolve and load the resources specified by locationpattern […]