函数防抖和函数节流

1>解决的问题

函数节流与函数防抖都是优化高频率执行js代码的一种手段，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

2>函数防抖

1）概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

2)场景：在用户注册的时候手机验证码和邮箱验证

3)代码:要点是需要一个setTimeout来辅助实现

// 函数防抖
 var timer = false; 
document.getElementById("debounce").onscroll = function(){ 
clearTimeout(timer); // 清除未执行的代码，重置回初始化状态 
timer = setTimeout(function(){ console.log("函数防抖"); }, 300); 
}; 

3>函数节流

1)概念：预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

2)场景：要点是声明一个变量当做标志位记录当前代码是否正在执行

在项目中需要使用scroll事件，如果直接使用scroll事件，当滚动到文档底部发送ajax请求的话，ajax请求会连续触发。

为了解决这个问题，设置一个初始值为true的标志变量，只有标识变量为true时才能发送ajax请求。当发送ajax请求时，将标志变量设为false，收到请求的响应并处理完后将标志变量设为true。

4>区别

可以拿我们平时坐电梯为例来形象地表述二者的区别

函数防抖：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

函数节流 ：保证如果电梯第一个人进来后，10秒后准时运送一次，这个时间从第一个人上电梯开始计时，不等待，如果没有人，则不运行