前端性能优化 -- 防抖与节流

防抖（debouncing）和节流（throttling）都是为了限制函数的执行。
举个例子，当用户频繁点击一个按钮时，防抖函数可以让事件响应函数

• 在点击后马上执行，并且不响应之后的一连串点击
• 或者：让事件响应函数在这一连串点击之后执行
• 又或者： 在第一次点击的N毫秒后执行

节流函数与防抖函数类似，两者的差异在于：

• 节流函数保证N毫秒内，函数会被执行一次。比如，在用户连续点击某按钮的2秒里，一个设置了waitTime为300的被节流（throttled）函数，至少会被执行6次。
• 防抖函数在抖动期间只执行一次

window.requestAnimationFrame可以用来帮助实现防抖、节流函数。Lodash的防抖函数debounce()里就有用到这个API，另外，Lodash的节流函数throttle()也是基于自己的debounce函数实现的。

lodash的debounce()函数与throttle()函数

API文档：
_.debounce(func, [wait=0], [options={leading: Boolean, trailing: Boolean}])
_.throttle(func, [wait=0], [options={leading: Boolean, trailing: Boolean}])

参考文章
强烈推荐： 一篇图文并茂的阐述防抖和节流的文章
Lodash的实现：
lodash/debounce.js
lodash/throttle.js