JavaScript防抖节流

函数防抖

原理： 当持续触发事件时，一定时间段内没有再次触发事件,事件处理函数才会执行一次，如果设定的时间到来之前，又触发了事件，就重新开始延时。

场景：scroll事件持续触发时，并不持续的触发事件处理函数，当1000毫秒内没有触发scroll事件时，才会延时触发scrooll事件处理函数。

实现：每次都要清空定时器。重新设置上计时器的值，使得计时器每次都重新开始，直到最后满足条件并且等待delay时间后，才开始执行fn函数

function debunce (fn, delay) {
		// fn是要传入的进行防抖处理的函数， delay是等待时间
		var timer = null;
		return function(){
			var _this = this,args = arguments;
			clearTimeout(timer);//每次都有清空定时器
			timer = setTimeout ( function () {
				fn.apply(_this, args);
			} ,delay )
		}
}

函数节流

原理：持续触发事件时，保证一定时间段内只调用一次事件处理函数。

场景：窗口调整（调整大小），页面滚动（滚动），抢购时疯狂点击（鼠标按下）

函数节流主要有两种实现方法：时间戳和定时器。

		// 时间戳实现
		function throttle（handler，wait）{  //handler是要进行节流的函数，wait是等待时间
            var lastTime = 0;
            return function（）{
                var nowTime = new Date（).getTime（）;    //获取当前时间
                if（nowTime - lastTime> wait）{
                    handler.apply（this，arguments）;
                    lastTime = nowTime;      //更新最后时间
                }
            }
        }

		// 定时器实现
		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);                
		        }            
		    }        
		}