The image stabilization function with the throttle javascript

  Usually we ourselves may need in the development process of the listening window size (resize, etc.) to adjust the style, or to perform the corresponding method keys on the keyboard (keyup etc.) events according to mouse movements (mousemove, etc.). But there will have a problem - frequent changes in the size of the window and moving the mouse will lead to the front page to be rendered frequently, sometimes may cause the page to crash. Page rendering process is being operated dom, dom and the more frequent the operation, the impact on the performance of the front end of the larger, front-end performance is also worse, so in addition to the great God who will summarize function image stabilization and throttle these two solutions page rendering is the transition leading to poor performance issues. So in this record for future review, while also being able to understand what their own time to learn what the contents of these articles.

1, anti-shake function

Principle: After the function is executed once, can not wait to perform again in the period. This function is triggered during the waiting time, the waiting time is recalculated.

Code

    /*
    *fn:要防抖的函数
    *wait:要等待的时间
    *immediate:是否立刻执行fn函数
    */
    function debounce(fn,wait,immediate){
        let timer=null; 
        let _debounce=function(){
            //判断定时器是否存在，存在即删除定时器
            timer&&clearTimeOut(timer);
            //是否立刻执行
            if(immediate){
                //定时器不存在时，才回去执行函数
                !timer&&fn.apply(this,...arruments)
                timer=setTimeOut(()={
                    timer=null;
                    //过了await时间后，fn才可以被再次执行
                },await)
            }else{
                timer=setTimeOut(()=>{
                    //过了await时间后，再次设置的定时器才不会被清除
                    timer=null;
                    fn.apply(this,...arguments);
                    //arguments为调用fn函数传入的参数
                },await)
            }
        }
        //取消
        _debounce.cancel=()=>{
            timer=null;
            clearTimeOut(timer);
        }
        return _debounce;
    }
    //应用
    document.onmousemove=debounce(function(e){
        console.log("鼠标移动了");
        console.log(new Date().getUTCSeconds());
        console.log(e);//e是事件对象，
    },300,true);
复制代码

Output:

2, the throttle function

Principle: The throttle is let to perform a function (event to keep firing at regular intervals, perform only one incident) only within a specific period of time.

Code:

function throtle(fn,await){
    let timer=null;
    let previousTime=0;
    let _throtle=()=>{
        let now=+new Date();//获取当前时间戳
        let remain=now-previousTime
        if(remain>await){
            //下面的代码只会在第一次触发时执行（或者是间隔时间超过await后再次执行）
            if(timer){
                //清除定时器
                clearTimeOut(timer);
                timer=null
            }
            //此时now不等于+new Date()
            previousTime=+new Date();//当前时间,使用+获取当前时间戳
            fn.apply(this,...arguments);
        }else if(!timer){//避免添加多个定时器
            timer=setTimeOut(()=>{
               timer=null;
               previousTime=+new Date();//当前时间
               fn.apply(this,...arguments);
            },remain);
        }
    }
    _throtle.cancel=()=>{
        timer=null;
        clearTimeOut(timer);
        previousTime=0;
    }
    return _throtle;
}
复制代码

Reference links:
1, a qualified mid-level front-end engineers must master the skills of 28 JavaScript
2, anti-shake function
3, javaScript topic of study followed by underscore image stabilization
4, javaScript follow underscore the topic of science throttle