在人生的第一个面试，第一个问题就是面试官问项目遇到的难点以及怎么解决的。我说了自己是如何处理函数节流，结果说的并不是很满意。所以，我决定重新总结一下函数节流与防抖。

深入理解概念

throttle-函数节流：我们希望函数在以一个可以接受的频率重复调用,从而减少函数的执行频率提高网页性能。

debounce-函数防抖：我们希望函数只会调用一次，即使在这之前反复调用它，最终也只调用一次。

下面我们来看一个栗子...

// 普通滚动	document.getElementById("noscroll").onscroll = function(){	console.log("普通滚动");	};复制代码

除了滚动事件此类问题还有：

1.resize监听浏览器窗口大小 2. 鼠标的点击事件 mouseup, mousedown,mousemove 3.键盘的keyup, keydown， input事件复制代码

函数防抖原理

如果方法多次被触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。如果计时完毕，没有方法进来访问触发，则执行代码。

这个方法的作用是监听ID为debounce元素的滚动事件 进入滚动事件方法体的时候，做的第一件事就是清除上次未执行的setTimeout。而setTimeout的引用id由变量timer记录。

所以这里直接执行clearTimeout即可。 然后，将需要执行的代码放入setTimeout中，再返回setTimeout引用给timer缓存。 如果倒计时300ms以后，还没有新的方法触发滚动事件，则执行setTimeout中的代码。

函数防抖的实现重点，就是巧用setTimeout做缓存池，而且可以轻易地清除待执行的代码。

下面是函数防抖代码

// 函数防抖	var timer = false;	document.getElementById("debounce").onscroll = function(){	clearTimeout(timer); // 每次调用滚动事件都会将前一次的timer清空，确保只执行一次	timer = setTimeout(function(){	console.log("函数防抖");	}, 300);	};			}复制代码

函数防抖的应用场景：最常见的是用户注册时候的手机号码验证和邮箱验证。只有等用户输入完毕后，才需要检查格式是否正确，如果不正确，再弹出提示语。

函数节流原理

// 函数节流var timer = true;document.getElementById("throttle").onscroll = function(){    if(!timer){        // 判断是否已空闲        //代码进行到这儿则是在执行中，则直接return        return;    }   timer = false;    setTimeout(function(){        console.log("函数节流");        timer = true;    }, 300);};复制代码

函数节流的要点是，声明一个变量(timer)当标志位，记录当前代码是否在执行。如果空闲(即timer为true)，则可以正常触发方法执行。如果代码正在执行，则取消这次方法执行，直接return，这样就可以做到函数减少执行频率。