[interview question] anti shake and throttling

【 Interview questions 】 Anti shake and throttling

---

---

1. Anti shake and throttling

Concept

   Shake proof ： At certain intervals , Turn multiple triggers into one trigger , Similar to the return to the city in the game , You have been triggering the event of returning to the city , But in the end, it can only be executed once , As soon as it's time to return to the city, I'll go home

   throttle ： Reduce the frequency over a period of time , Similar to the skills in the game CD, You can only use the skill once in the specified time

1. Shake proof

1.1 Ordinary anti shake

/*  Anti shake function   Parameter one ： You need the anti shake function   Parameter two ： Delay Time  */

function debounce (fun,delay){
    
    let timeout = null
    return function(){
    
        //  If there is a value, clear the timer 
        if(timeout)
        {
    
            clearTimeout(timeout)
        }
        //  If there is no value, turn on a timer 
        timeout = setTimeout(() => {
    
            /* 1.  Here, the arrow function will this Point to the outside  2.  Supplementary information arguments（ Argument list ） , Each argument   The list corresponds to its own internal function , Only inside the function will there be   Argument list , Use the arrow function here , Point the arrow inside the function arguments,  Point to the outside  */
            fun.apply(this,arguments)
        }, delay);
    }
}


function request(e){
    
     console.log(' Send a request ');
     console.log(this);
     /* e When did it come in ？  When window When calling this function, pass in the arguments  */
     console.log(e);
}

let btn = document.querySelector('button')
btn.addEventListener('click',debounce(request,500))

1.2 Anti shake upgrade

/*  Anti shake function   Parameter one ： You need the anti shake function   Parameter two ： Delay Time  */

function debounce (fun,delay){
    
    let timeout = null
    return function(){
    
        //  If there is a value, clear the timer 
        //  We need to pay attention to ： Clear timer , It doesn't mean that the value is cleared 
        if(timeout)
        {
    
            clearTimeout(timeout)
        }else{
    
            //  Execute immediately for the first time , The rear trigger effect is the same as that of ordinary anti shake 
            fun.apply(this,arguments)
        }       

         //  If there is no value, turn on a timer 
         timeout = setTimeout(() => {
    
            /* 1.  Here, the arrow function will this Point to the outside  2.  Supplementary information arguments（ Argument list ） , Each argument   The list corresponds to its own internal function , Only inside the function will there be   Argument list , Use the arrow function here , Point the arrow inside the function arguments,  Point to the outside  */
            fun.apply(this,arguments)
        }, delay);
    }
}


function request(e){
    
     console.log(' Send a request ');
     console.log(this);
     /* e When did it come in ？  When window When calling this function, pass in the arguments  */
     console.log(e);
}

let btn = document.querySelector('button')
btn.addEventListener('click',debounce(request,1000))

1.3 Add anti shake parameters （ Execute now ）

/*  Anti shake function   Parameter one ： You need the anti shake function   Parameter two ： Delay Time   Parameter 3 ： Whether to enable immediate execution   Be careful ： Immediate execution here refers to the first click   No delay , The first time here refers to after each delay   Clicking again is the first time  */

function debounce (fun,delay,immediate=false){
    
    let timeout = null
    return function(){
    
        //  If there is a value, clear the timer 
        //  We need to pay attention to ： Clear timer , It doesn't mean that the value is cleared 
        if(timeout)
        {
    
            clearTimeout(timeout)
        }

        //  Determine whether to start immediate execution 
        if(immediate)
        {
    
            //  First time in timeout The value is null, Take the inverse as true 
            let first = !timeout
            if(first)
            {
    
                fun.apply(this,arguments)
            }
            timeout = setTimeout(() => {
    
                //  Recover after delay timeout Value , Let it call functions 
                timeout = null
            }, delay);
        }else
        {
    
            //  If there is no value, turn on a timer 
            timeout = setTimeout(() => {
    
                /* 1.  Here, the arrow function will this Point to the outside  2.  Supplementary information arguments（ Argument list ） , Each argument   The list corresponds to its own internal function , Only inside the function will there be   Argument list , Use the arrow function here , Point the arrow inside the function arguments,  Point to the outside  */
                fun.apply(this,arguments)
            }, delay);
        }
    }
}


function request(e){
    
     console.log(' Send a request ');
     console.log(this);
     /* e When did it come in ？  When window When calling this function, pass in the arguments  */
     console.log(e);
}

let btn = document.querySelector('button')
btn.addEventListener('click',debounce(request,1000,true))

2. throttle

2.1 The first way to write it

function throttle (fun,delay){
    
    let previous = 0
    return function(){
    
        let current = new Date()
        //  Time greater than delay , It means skills CD It's ready to use 
        console.log(current - previous);
        if(current - previous > delay)
        {
    
            fun.apply(this,arguments)
            //  Update time 
            previous = current
        }
    }

}

function request(e){
    
     console.log(' Send a request ');
     console.log(this);
     /* e When did it come in ？  When window When calling this function, pass in the arguments  */
     console.log(e);
}

let btn = document.querySelector('button')
btn.addEventListener('click',throttle(request,1000))

2.2 The second way

function throttle (fun,delay){
    
    let flag = true
    return function(){
    
        if(flag)
        {
    
            fun.apply(this,arguments)
            flag = false
            setTimeout(() => {
    
                //  Once the delay time is up, restore the right to use skills 
                flag = true
            }, delay);
        }
    }
}

function request(e){
    
     console.log(' Send a request ');
     console.log(this);
     /* e When did it come in ？  When window When calling this function, pass in the arguments  */
     console.log(e);
}

let btn = document.querySelector('button')
btn.addEventListener('click',throttle(request,2000))

---

summary

That's what we're going to talk about today , I hope that's helpful ！！！