debounce防抖函数减少函数调用的逻辑分析
1,什么是debounce防抖函数:
- 当调用同一动作在n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。
2,debounce的代码:
debounce(func, delay) { let timer = null return function (...args) { //这一层函数的封装返回,是为了下一个原函数到来,可以拿到上一个原函数 if (timer) clearTimeout(timer) timer = setTimeout(() => { func.apply(this, args) }, delay) } }
3,分析:(包裹上时间的外衣,在时间还没来时,kill)
从代码逻辑看,第一个原函数到来,在某个时间后才执行的原函数,先将原函数通过setTimeout封装起来保存到变量timer,
但是在下一个原函数的到来时,清除掉timer(即上一个通过时间的外衣包裹着的原生函数),然后又给它包裹上一层时间的外衣。
4,防抖函数使用场景:
(1)懒加载、滚动加载、加载更多或监听滚动条位置;
(2)搜索框输入,搜索联想功能;
(3)表单提交,防止表单重复提交;