preface

Shake stabilization and throttling functions. These days in the company you often hear about shockproofing, throttling, these are now “standard” in actual development projects! Under the influence of long-term, I also try to get to know some! In recent practical development, just right also used.

To know a

  • Image stabilization

    • What is debounce?

      As I understand it, when we need to perform an action, the action may be repeated several times, and the result may get stuck, seriously affecting performanceAfter the last trigger actionIn the NTH secondperformAt a time.

    • Common Application Scenarios

    • The user needs to constantly enter values, such as filling out input form validation or entering something in the search box.
    • When the user is constantly tabbing between pages.

    • Principle and Implementation

      Principle of image stabilizationThat is: after the event is fired continuously, the response is only inWithin a certain amount of timeIf the event is triggered for the last time, the latest event shall prevail. If the event is triggered again within that time, it willRecalculation time, to the current in this certain timeThe latest incidentShall prevail. (If it’s a little confusing, let’s take a lookThe implementation code!)

         function  debounce(fn,delay) {
   let timer;
   return function () {
       var context = this; // Save the current this point to the current object
       var args = arguments;  // Get the parameters passed implicitly
       clearTimeout(timer);
       timer = setTimeout(function () { fn.apply(context, args); }, delay); }}Copy the code

    In practice, only need to call this function, such as in the recent input box to enter search, you can do a image stabilization, is to let the user input after search event to trigger, it will greatly improve performance, actually the code is easy to understand, has said the stabilization function, actually is to use the timer setting time delay, The next event to execute is triggered after a certain amount of time. In other words, the event handler is executed only once in a certain period of time.

  • The throttle

    • What is throttle?

      Throttling to understand, in fact, that is’ temperance execution, it is a common example, if you open a faucet is allowed to flow out a steady stream of water, it can be our code has been constantly, it is a waste to resources, we need through the throttle to tighten the tap a little bit, make water frequency is reduced, however, Every period of time can drip water, thus saving resources. So does throttling look like an on-off switch?

    • Common Application Scenarios

    • Scroll up to load, scroll down to refresh.
    • Oversize, mousemove,mousehover.
    • Drag-and-drop events and so on.

    • Principle and Implementation

      Throttling principleIn other words, when a series of events are fired, a function is executed every once in a while, instead of waiting a certain time for the function to be executed. Let’s look at the basicsThe implementation code!!!!

         function  throttle(fn,delay) {
   let timer = null;
   return function () {
       var context = this; // Save the current this point to the current object
       var args = arguments;  // Get the parameters passed implicitly
       if(timer == null){
           timer = setTimeout((a)= >{ fn.apply(context,args) }, delay); }}}Copy the code

    It looks like the throttling is more like a ‘timer’, and each time it’s executed, it triggers another timer. In our usual development of the use of throttling is the most similar to listen to the scroll bar, slide to a certain position will trigger the corresponding event, interested partners can try to understand a time to see!

summary

Shocksuppression and throttling look so similar that they are all for performance optimization; But their principles are different. To summarize the difference briefly:

Image stabilizationChange multiple execution to only one execution;The throttleChange multiple execution to periodic execution.

As for anti-shaking and throttling, I have used them in a recent practical project, so I want to summarize them and deepen my understanding. Also hope to help friends to understand, after all, this is one of the high-frequency interview questions. Of course, if there are any good suggestions and suggestions, welcome friends to put forward and correct, to communicate, progress together, refueling together ~~~ long distance ahead, we have been on the road, continue to update ING…