Function anti chattering and function throttling

Hello everyone , I meet you again , I'm your friend, Quan Jun .

Preface

There are some browser events that we don't want to trigger very often , Such as resizing the window (onresize)、 Monitor scroll bar scrolling (onscroll), If these listening events need to call the interface, it may be called hundreds of times in a second , There must be something wrong with this .

Function anti shake （debounce）

If someone enters the elevator （ Triggering event ）, The elevator will be in 10 Seconds later （ Execute event listener ）, At this time, if someone enters the elevator again （ stay 10 Trigger the event again within seconds ）, We have to wait again 10 Seconds to go （ Retime ）.

function debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function log(){
    console.log(1)
}

window.addEventListener('scroll', debounce(log, 1000));

Function throttling （throttle）

Make sure that if the first person in the elevator comes in ,10 Deliver it on time in seconds , This time starts from the first person on the elevator , Don't wait for , If no one , Does not run . Think carefully , The above anti shake method still has some shortcomings . If the page is long , We've been scrolling the page , that log Methods will never be executed . So we can upgrade the above anti shake method .

function throttle(fn,wait,time){
    var previous = null; // Record the last running time 
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        // When the difference between the last execution time and the current time is greater than the set execution interval , Just take the initiative to do it once 
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;//  After executing the function , Record the current time now 
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function log(){
    console.log(1)
}

window.addEventListener('scroll', throttle(log, 1000, 2000));

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/107480.html Link to the original text ：https://javaforall.cn