When the browser’s scroll (scroll bar), keypress (button press), mousemove (mouse movement) and other events are launched, they will always call the callback function bound to the event to trigger high frequency. If the callback function Complexity will cause the response to fail to keep up with the trigger, which may cause page lag, greatly waste resources, and reduce front-end performance.
There are two solutions to this:Debounce with Throttling (throttling)；
1. Debounce
Function: It is a callback function that triggers an event multiple times in a short period of time, executed only the last time, or executed only at the very beginning.
Take the user dragging to change the size of the window and triggering the resize event as an example. During this process, the size of the window is constantly changing, so if we bind a callback function in the resize event, this function will always be triggered during the dragging process. If the callback function is too complex, it will inevitably not cause page jams, and this situation is meaningless in most cases, and it will also cause a lot of waste of resources.
Ordinary plan:
window.addEventListener('resize',()=>{
console.log('触发事件');
});
Optimization
function debounce(fn,delay){
// 维护一个 timer
let timer=null;
return function(){
// 获取函数的作用域和变量
let context=this;
let args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
fn.apply(context,args);
},delay);
}
}
function res(){
console.log('触发事件');
}
//在 debounce 包装要触发的函数，过1000秒触发；
window.addEventListener('resize',debounce(res,1000));
Code logic:
- Binding the processing function on the resize event, then the debounce function will be called immediately, in fact, the bound function is the function returned by the debounce function.
- Every time an event is triggered, the current timer will be cleared and then reset, and called at time.
- Only when the resize event is triggered for the last time can it be executed after the delay time.
Add parameters, set to execute the function immediately
function debounce(fn,delay,rightAway=false){
//rightAway 不传时 ，默认为非立即执行函数
// 维护一个 timer
let timer=null;
return function(){
// 获取函数的作用域和变量
let context=this;
let args=arguments;
if(timer) clearTimeout(timer);
if(rightAway){
var now=!timer;
timer=setTimeout(()=>{
timer=null;
},delay);
if(now){
fn.apply(context,args);
}
}else{
timer=setTimeout(()=>{
fn.apply(context.args);
},delay);
}
}
}
2. Throttling
Function: similar to anti-shake, but throttling is to allow the function to be executed only once within a period of time
Timer implementation
function throttle(fn,delay){
var timer =null;
return function(){
let context=this;
let args=arguments;
if(!timer){
timer=setTimeout(()=>{
fn.apply(context,args);
timer=null;
},delay);
}
};
}
function res(){
console.log('触发事件');
}
window.addEventListener('resize',throttle(res,2000));
Timestamp implementation
function throttle(fn,delay){
var p =Date.now();
return function(){
let context=this;
let args=arguments;
let n=Date.now();
if(n-p>=delay){
fn.apply(context,args);
p =Date.now();
}
};
}
function res(){
console.log('触发事件');
}
window.addEventListener('resize',throttle(res,2000));
The above two cases are used for high-frequency trigger events, and the appropriate usage is selected according to different scenarios. It is recommended to select anti-shake for high-frequency trigger events with pauses, but for high-frequency trigger and continuous events, select throttling.