起因:
之前因为节流和防抖经常放在一起被谈及,也没有单独去使用过,一直以为这两个是一回事,直到工作中真正添加使用的时候才发现,原来这其中,另有说法!!!
说到节流和防抖,这里就不得不提一下很常用的 lodash
lodash是一个JavaScript实用工具库,提供了很多常用功能的函数,包括节流和防抖.
重点区别:
在这里我就重点说一下两者的区别了
- 节流(throttle):
节流函数用于限制函数在一定时间间隔内执行的频率。它确保在指定的时间间隔内,无论触发多少次函数调用,只有一次函数执行。节流常用于需要控制频繁触发的事件,以减少函数执行的次数,例如滚动事件、窗口调整事件等。
使用节流函数的优点是可以平滑地控制函数执行的频率,避免过多的计算和渲染。对于需要频繁触发的事件,节流可以有效地限制函数的调用次数,提高性能并减少资源的消耗。
- 防抖(debounce):
防抖函数用于在函数连续触发后,只在一定的延迟时间后执行一次函数。它会等待一段时间,如果在这个时间段内没有再次触发函数,就执行一次函数调用。如果在等待期间内再次触发函数,会重新计时等待延迟时间。
防抖常用于需要等待一段时间后执行函数的场景,例如搜索框输入事件、窗口调整结束后执行回调等。它可以避免函数在连续触发时频繁执行,只有在用户停止操作一段时间后才执行函数调用,提高性能并避免不必要的计算和请求。