学习总结之函数防抖和节流

函数防抖（debounce）

什么是函数防抖，就是指一个函数在规定的时间内只能执行一次，如果在规定时间内又出发了函数，则会重新计算函数执行时间。  

function debounce(func,time){    
    var timeout;    
    return function(){        
        var _this = this;   
        var args = arguments;        
        clearTimeout(timeout)        
        timeout = setTimeout(function(){           
            func.apply(_this,args)        
        },time)    
    }
}

函数防抖的实现原理非常简单，总的来说就是通过闭包使用变量来保存一个定时器，每当用户触发点击事件时就clear上次的定时器，然后保存一个新的定时器。知道用户在规定的时间内没有触发事件，就会执行相应的函数。

注意：在这里需要用变量来保存相应的作用域和参数。

函数节流（throttle）

函数节流是指某个函数被连续的触发，但是在规定时间内只执行一次。节流会稀释函数的执行频率。

节流的实现方法有两种一种是用定时器，另一种则是用时间戳。

定时器版代码：

var throttle = function(func,time){    
    var timeout;    
    return function(){        
        var _this = this;        
        var args = arguments;        
        if(!timeout){            
            timeout = setTimeout(()=>{                
                func.apply(_this,args);               
                timeout = null;            
            },time)        
        }    
    }
}

时间戳版：

var throttleTime = function(func,time){    
    var perTime=0;    
    return function(){        
        var _this = this;        
        var args = arguments;        
        var nowDate = new Date().getTime();        
        if(nowDate-perTime > time){            
            perTime = nowDate;            
            func.apply(_this,args);        
        }   
    }
}

对比这两个版本，我更喜欢时间戳的版本，因为通过实验发现，时间戳版本的时间误差在3毫秒左右，而定时器版本的时间误差在几毫秒到几十毫秒不等。而且定时器版本在你停止事件后还会在执行一次函数。