函数节流和函数防抖

写在前面

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

函数防抖原理

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

函数防抖的实现

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

        var debounce= {
			timeId:null,
			zoomBody: function(){
                            //逻辑代码...
                            console.log(99999);
			},
			zoomHandle: function(timeInternal){
				clearTimeout(this.timeId);
				this.timeId = setTimeout(this.zoomBody,timeInternal);
			}
		}
		document.body.onresize = function(){
			debounce.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请求应用中有效提升用户体验。

你可能感兴趣的:(技术笔记)