知识总结：函数防抖和函数节流

函数防抖与函数节流巧妙地使用 setTimeout 来存放待执行的函数，这样可以很方便的利用 clearTimeout 在合适的时机来清除待执行的函数。

 

一、函数防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
生活中的实例： 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。还有，给按钮加函数防抖防止表单多次提交。对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。

• 函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
• 如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
• 如果计时完毕，没有方法进来访问触发，则执行代码

 

 

二、函数节流：指定时间间隔内只会执行一次任务

函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到

• 函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
• 如果空闲，则可以正常触发方法执行。
• 如果代码正在执行，则取消这次方法执行，直接return。