Anti shake and throttling

Both anti shake and throttling are used to solve the problem that the front-end events are too frequent , Considering the utilization of resources and the burden of equipment , You need to control the number of requests . The purpose of anti shake and throttling is the same , But it's not the same way .

Shake proof

Anti shake is only responding to the last event , Just tell , Suppose an event has been triggered , Start timing , If in a period of time , If this event is triggered again , Restart the clock , Until the timing is complete , Responding to events .

function fangdou(fn,delay){
    
    let timer = null;
    return function(){
    
        if(timer)
            clearTimeout(timer);
        timer = setTimeout(()=>{
    
            fn.call(this);  
        },delay)
    }
}

Use this function directly when using ,fn Is the response event ,delay It's the timing .

throttle

Throttling controls the time interval between two response events , I promise that within this period of time , Will no longer respond to this event , Time goes by , You can respond to this event again .

function jieliu(fn,delay) {
    
    let ready = true;
    return function (){
    
        if(ready){
    
            fn.call(this);
            ready = false;
            setTimeout(()=>{
    
                ready = true;
            },delay)
        }
    }
}

Use this function directly when using ,fn Is the response event ,delay Is the time interval between two corresponding .