JS之函数防抖与节流

1、函数防抖

原理：函数执行过一次后，在等待时间段内不能再次执行。 在等待时间内触发此函数，则重新计算等待时间。

代码实现

    /*
    *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;
    }
    //应用
    window.onscroll = _debounce(function(){
        console.log(1);
    }, 500, true);

应用场景：

• 每次 resize/scroll 触发统计事件
• 文本输入验证（连续输入文字后发生ajax请求进行验证，验证一次就好）
• mousemove，mousedown
• 加载更多

 

2、函数节流

原理：节流就是在让函数在特定的时间内只执行一次(持续触发事件，每隔一段时间，只执行一次事件)。

代码实现

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

应用场景：

• 每次 resize触发统计事件
• mousemove