concept

Function throttling and function anti shake are both ways to optimize high-frequency execution of js code.

Function throttle and function anti shake are both used to limit the frequency of function execution, so that the response speed caused by too high trigger frequency of optimization function can not keep up with the trigger frequency, resulting in the phenomenon of delay, false death or jamming.

Function throttle

Function throttling refers to that the operation executed only once in a certain period of time, that is to say, an execution cycle is set in advance. When the time of calling the action is greater than or equal to the execution cycle, the action will be executed, and then enter the next new cycle. A more vivid example is that if you tighten the faucet until the water flows out in the form of water drops, you will find that every other period of time, you will There will be a drop of water coming out.

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());
}
// Rolling events
window.addEventListener('scroll', debounce(handle, 1000));

Function anti shake

Function anti shake refers to that in a certain period of time, when the action is triggered continuously and frequently, the action will only be executed once, that is to say, the action will be executed after n milliseconds of calling action. If the action is called again within n milliseconds, the execution time will be recalculated, and the continuous action in a short period of time will always be triggered only once, for example, holding down one action with fingers all the time Spring, it won't spring up until you let go.

time stamp

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));

timer

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));