debounce

When users interact with web pages, they often request and send data to the server according to the status and data of the page, such as real-time verification according to the user's input data, pull-down request data, etc. if the user operates too frequently, the page status and data change too frequently, they will make multiple requests, many of which are unintended True, real-time verification, only the last input of the user needs to be verified, and the pull-down request only needs to be requested at the last time of the user's pull-down. This needs to be achieved by anti shake.
Anti shake principle: add delay to the function called when the event is triggered. If the function is triggered frequently within the delay, the last event trigger will be canceled and the delay will be recalculated. In this way, the user's function will be called only after the most trigger.

//fn is a callback function, and delay is a set delay
function debounce(fn, delay){
    var timeout; //Timer number
    return function(){
        //context is the environment in which the callback function runs, 
        //args is the parameter of the callback function, generally the event variable passed in by addEventListener
        var context = this, args = arguments;
        clearTimeout(timeout);//When the user frequently triggers the event, the timer is cleared
        timeout = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}
//Calling mode
var validate = debounce(function(){
    //do somthing
}, 200);
document.querySelector('input').addEventListener('input', validate);

throttle

Throttling, as the name implies, is to close the valve of the pipeline a little bit to make the water flow less. In javascript, many events are triggered continuously, such as resize, mousemove. We don't want the event to be triggered frequently. If we adopt the anti shake scheme, the event will be triggered only once in the delay time, which is obviously unreasonable. We only need to make the trigger frequency lower, which needs to be realized by throttling.
Throttling principle: add time threshold to the function called when the event is triggered. The callback function will be called only when the event is triggered when the time threshold is exceeded.

//fn is the callback function, threshhold is the time threshold
function throttle(fn, threshhold){
    var start = new Date(), timeout;
    var threshhold = threshhold || 160;
    return function(){
        //context is the environment in which the callback function runs, 
        //args is the parameter of the callback function, generally the event variable passed in by addEventListener
        var context = this, args = arguments, cur = new Date();
        clearTimeout(timeout);
        //Decide whether to call the callback function through the time interval of two consecutive triggers
        if(cur - start >= threshhold){
            fn.apply(context, args);
            start = cur;
        }else{
            //When the continuous triggering behavior ends, the last function callback is also required
            timeout = setTimeout(function(){
                fn.apply(context, args)
            }, threshhold);
        }
    }
}
//Calling function
var mousemove = throttle(function(e) {
 //do somthing
});

// Binding monitoring
document.querySelector("#panel").addEventListener('mousemove', mousemove);

Here is the html page

 <div id='panel' style="background:blue;width:100vw;height:100vh">

 </div>

In the end, you can pass this animation To understand, learn how to shake and throttle.