I understand how to make a throttle function and anti-shake function.

There are many scenes in daily development. We all need to use throttle functions and anti-shake functions, such as: Implementing the fuzzy query of the input box because it needs to be polled Ajax, Impact browser performance, so you need to use a throttle function; authenticate to the mobile phone number, name, often we only need to verify it, this time we need to use the anti-shake function; but there are many information on the Internet. Specific and convenient understanding. Today, I have read some information, let’s talk about my understanding of the throttle function and the anti-shake function, I hope to help you understand;

During the throttle function

As the name, it is a function of saving traffic saving memory performance. It can be understood as a performance optimization scheme;

Hold an example: a faucet has been dropping water, may drop a lot of water in one time, but We want to control its frequency, let it drop every 1000 milliseconds, this time we can use the throttle function to control (simple understanding as a periodic timer)

JS code ( Can be directly copied to the editor to see the effect):

// First define a global variable var canrun = true; // When the browser window size changes, it is re- When the calculation window size triggers window.onResize = function () {// Reverse, canRun is false if (! CanRun) {// direct return, the subsequent code does not execute return} // to this is CANRUN is true, and then assigns value for falserun = false // set a timer for polling operation settimeout (“” {// This is what you want console.log (“Function Sunday) // Final Remember to re-assign true to let him refer to canrun = true // is executed once every 1000 milliseconds is 1 second}, 1000)}
   
anti-shake function

anti-shake The function and the throttle function are very similar, but it is slightly different. The definition of the anti-shake function is to delay the trigger after the event is completed, and only triggers once; if it is triggered before the trigger is completed, it will refresh the delay again; (If the event does not trigger, it will only be executed, it is the last time that the timer is finally taken) 一文看懂如何简单实现节流函数和防抖函数

For example: If there is a spring, you have been pressing down, as long as you don’t let go, it is not Will pop up, the spring will only play out in the moment you let go; the anti-shake function is also the case, as long as the matter is not the end, it will not be executed, only after the event is triggered;

JS code (can be copied to the editor on the editor):

// Define the method to do Function Fun () {Console.log (‘OnResize ‘)} // Define the event trigger to be executed, the two parameters are incoming things and Timers’ milliseconds in the Timer Function Debounce (FN, DELAY) {// Define a variable as the like to clear the object VAR Handle; // Here, there is a function in a function, and the variable mutual signage causes the garbage collection mechanism to not destroy the Handle variable return function () {// He must clear the previous timer, then create A new Timer Cleartimeout (Handle) // The last timer will only be executed once, the event trigger is completed, the delay is 500 milliseconds (here the variable assignment is the setup connection, the address assignment, must re-assapt Give Handle Handle = setTimeout (Function () {fn ()}, DELAY}}} // add a monitoring event to the browser resizeWindow.AddeventListener (‘Resize’);

The effect is as follows:

 Summary:   
1. The anti-shake function and the throttle function are used to enhance performance optimization and user experience;
2. The anti-shake function will only be executed once, and it is the last trigger, and the throttle function will perform multiple times;

Ok, the above is all this article. Content, I hope this paper has a certain reference value for everyone’s learning or work, thank you for your support of Tumi Cloud.

一文看懂如何简单实现节流函数和防抖函数

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment