写在前面
在前端开发中,我们知道对于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请求应用中有效提升用户体验。