[JS knowledge] easily understand JS anti shake and throttling

js Anti shake and throttling are the knowledge points often asked in front-end interviews , Combine today moba Class games to explain .

1. Shake proof ：

Continuous trigger does not execute , Execute after a period of time without triggering . It means after triggering the event n Function can only be executed once per second , If in n Seconds to trigger the event , The function execution time is recalculated .

Just like the return to the city among the kings , Each time I go back to the city, I need to read a note for a period of time , After reading the note, execute the operation of returning to the city . If the return to the city is triggered again when reading the note , Then the reading will be interrupted and the reading will be restarted . This is it. Shake proof .

The practical application ：

// as follows , Continue to trigger  scroll  When an event is , Not implemented  handle  function , When  1000  No trigger in milliseconds  scroll  When an event is , Will delay the trigger  scroll  event 
function debounce(fn, wait) {
    
var timeout = null; 
return function() {
     
 if(timeout !== null) clearTimeout(timeout); 
 timeout = setTimeout(fn, wait); 
} 
} //  Processing function 
function handle() {
     
console.log(Math.random()); 
}
//  Scroll Events  window.addEventListener('scroll', debounce(handle, 1000)); 

2. throttle ：

Continuous triggering also performs , It's just that the execution frequency becomes lower . It means to trigger events continuously but in n Function is executed only once in seconds . Throttling dilutes the frequency of function execution .

Like ping in the king A equally , You are flat A How much is only related to your attack speed , It has nothing to do with your hand speed , Even if your hand speed is faster than the attack speed , Your Ping A The amount of is only related to the attack speed . This is it. throttle .

The practical application ：

// as follows , Continue to trigger  scroll  When an event is , Not immediately  handle  function , every other  1000  Only once in milliseconds handle  function 
var throttle =function(func, delay) {
    
var prev = Date.now(); 
return function() {
     
 var context = this; 
 var args = arguments; 
 var now = Date.now(); 
 if (now - prev >= delay) {
     
 func.apply(context, args);
 prev = Date.now(); 
 } 
} 
}
function handle() {
    console.log(Math.random());} 
window.addEventListener('scroll', throttle(handle, 1000)); 

3. Common ground

Is to limit the number of function executions , To improve the user experience .