1. What is function anti-shake
Concept: Function anti-shake (debounce) means that after the event is triggered, the function can only be executed once within n seconds. If the event is triggered again within n seconds after the event is triggered, the function delay execution time will be recalculated.
For example, when taking the elevator, if the elevator detects that someone comes in (triggers the event), it will wait for 10 seconds. If someone comes in (triggers the event repeatedly within 10 seconds), the elevator will wait for another 10 seconds. In the above example, the elevator will close the elevator door and start running after detecting someone entering for 10 seconds. Therefore, the key to "function anti-shake" is thatAn eventoccurA certain timeAfter that, it will be executedSpecific actions。
2. Why do I need function anti-shake
During the front-end development process, there are some events, common, such asonresize，scroll，mousemove ,mousehoveretc. will be triggered frequently (triggered multiple times in a short time). If there is no limit, it may be executed dozens or hundreds of times within a second. If other functions are executed within these functions, especially functions that operate DOM (the browser operates DOM very performance-consuming), it will not only waste computer resources, but also reduce the program running speed, and even cause the browser to get stuck and crash. This problem is obviously fatal.
In addition, repeated ajax calls in a short period of time will not only cause confusion in data relationships, but also cause network congestion and increase server pressure. Obviously, this problem also needs to be solved.
3. How to solve the above problems with function anti-shake
Based on the above analysis of the problem and thinking carefully, you can think of the following solutions.
The key point of function anti-shake is that one is needed setTimeout to assist in the implementation and delay running the code that needs to be executed. If the method is triggered multiple times, the last recorded delayed execution code is usedclearTimeout Clear and start timing again. If the event is not retriggered during the timing, and the target code is executed when the delay time is completed.
4. Code implementation of function anti-shake
Based on the above analysis, we have implemented simple code for "function anti-shake", as follows:
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
(());
}
("resize",debounce(handle,1000));
5. Use scenarios for function throttling
Under what circumstances is functional anti-shake usually used? It is generally used in situations where continuous events only require one callback to be triggered. Specifically:
Search box Search input. Just send the request after the user enters the last time;
Username, mobile phone number, and email entry verification;
After the browser window size changes, just adjust the window before executing it. resizeCode in the event to prevent repeated rendering.
These are the uses we have encountered so far. After understanding the principles and implementation ideas, friends can use them in any situation where they need them to improve the quality of the code.
Summarize
Function anti-shake is actually divided into "execution version" and "non-execution version". The difference can be found based on the literal meaning. The so-called execution version means that the function will not be executed immediately after the event is triggered, but will be executed after n seconds. If the event is triggered again within n seconds, the function execution time will be recalculated. "Not immediate execution version" refers to the effect that the function will be executed immediately after the event is triggered, and then the event will not be triggered within n seconds before the function can be executed. .
During the development process, we need to decide which version of anti-shake function we need to use according to different scenarios. Generally speaking, the above anti-shake function can meet most scenario needs. But we can also combine the anti-shake function of the non-immediate execution version and the anti-shake function of the immediate execution version to realize the final double sword combination version of the anti-shake function. The following is a simple implementation for friends:
/**
* @desc Function anti-shake ----Combined version of "execution version" and "non-execution version"
* @param func function that needs to be executed
* @param wait Delayed execution time (milliseconds)
* @param immediate---true table is executed immediately, false table is not executed immediately
**/
function debounce(func,wait,immediate) {
let timer;
return function () {
let context = this;
let args = arguments;
if (timer) clearTimeout(timer);
if (immediate) {
var callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait)
if (callNow) (context, args)
} else {
timer = setTimeout(function(){
(context, args)
}, wait);
}
}
}
function handle(){
(());
}
// ("mousemove",debounce(handle,1000,true)); // Call to execute the version immediately("mousemove",debounce(handle,1000,false)); // Calling non-execution version
The above is a detailed explanation of JS function anti-shake. For more information about JS function anti-shake, please pay attention to my other related articles!