防抖(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