函数节流和函数防抖

写在前面

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

函数节流原理

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

函数节流的实现

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

[javascript]

1. var throttle = {

2. timeId:null,

3. zoomBody: function(){

4. //逻辑代码...

5. console.log(99999);

6. },

7. zoomHandle: function(timeInternal){

8. clearTimeout(this.timeId);

9. this.timeId = setTimeout(this.zoomBody);

10. }

11. }

12. document.body.onresize = function(){

13. throttle.zoomHandle(500);

14. }

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

函数防抖原理

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

函数防抖的实现

[javascript]

1. var throttle = {

2. timeId:null,

3. startTime: new Date(),

4. zoomBody: function(){

5. //逻辑代码...

6. console.log(99999);

7. },

8. zoomHandle: function(timeInternal,maxInternal){

9. clearTimeout(this.timeId);

10. var cur = new Date();

11. if(cur - this.startTime > maxInternal){

12. this.zoomBody();

13. this.startTime = cur;

14. }else{

15. this.timeId = setTimeout(this.zoomBody,timeInternal);

16. }

17. }

18. }

19. document.body.onresize = function(){

20. throttle.zoomHandle(500,2000);

21. }

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

总结

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

后记：对于大部分转行的人来说，找机会把自己的基础知识补齐，边工作边补基础知识，真心很重要。

"我们相信人人都可以成为一个IT大神，现在开始，选择一条阳光大道，助你入门，学习的路上不再迷茫。这里是北京尚学堂，初学者转行到IT行业的聚集地。"