函数节流和函数防抖

写在前面

    在前端开发中，我们知道对于DOM的频繁操作是非常消耗资源的，尤其是对于浏览器的onresize，onscroll事件进行响应去操作DOM元素的时候，有时候会看到浏览器卡顿，用户体验非常不好。但是我们又要监听浏览器的onresize，onscroll事件，这时候函数节流（throttle）和函数防抖（debounce）就发挥作用了。

函数节流原理

    对于连续触发的事件，我们通过设置一个定时器，让其在过了特定时间t1后触发，如果在t1时间内再次触发了该事件，则清除上一次计时器，重新计时，等待新计时时间的到来。

函数节流的实现

    下面一个例子，通过函数节流实现document.body的缩放，在缩放过程中不会触发自定义的函数，只有当停止缩放的时候才会执行函数：

        var throttle = {
			timeId:null,
			zoomBody: function(){
                            //逻辑代码...
                            console.log(99999);
			},
			zoomHandle: function(timeInternal){
				clearTimeout(this.timeId);
				this.timeId = setTimeout(this.zoomBody);
			}
		}
		document.body.onresize = function(){
			throttle.zoomHandle(500);
		}

以上代码只有在停止缩放时才会触发自定义的throttle.zoomBody函数。有时候这种方式并不能满足需求，比如用户在拖拽浏览器窗口时，去动态响应某个控件的宽度/高度，而不是等到停止拖动时才去自适应窗口。此时我们可以使用函数防抖的功能。

函数防抖原理

    函数防抖是在函数节流的基础上，每隔固定的时间，不管定时器触发没触发，都会执行一遍自定义函数。

函数防抖的实现

        var throttle = {
			timeId:null,
			startTime: new Date(),
			zoomBody: function(){
                            //逻辑代码...                            
                             console.log(99999);
			},
			zoomHandle: function(timeInternal,maxInternal){
				clearTimeout(this.timeId);
				var cur = new Date();
				if(cur - this.startTime > maxInternal){
					this.zoomBody();
					this.startTime = cur;
				}else{
					this.timeId = setTimeout(this.zoomBody,timeInternal);
				}
			}
		}
		document.body.onresize = function(){
			throttle.zoomHandle(500,2000);
		}

以上代码，在缩放过程中，每隔2秒执行一次throttle.zoomBody函数，避免了等待停止缩放才执行的弊端。

总结

    函数防抖的合理应用能够帮助我们充分节省cpu，内存等资源，同时又通过一定的时延间隔去执行自定义函数，在一些频繁的DOM操作，http请求应用中有效提升用户体验。